npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

preload-image2

v1.0.4

Published

Preload your files

Downloads

2

Readme

预加载你的图片,或者你的静态资源

使用方法:

import PreloadImage from "preload-image2";
const preloadImage = new PreloadImage({
  imageUrls: ["foo.png", "bar.jpg"],
  onLoaded() {
    console.log("全部加载完成");
  },
  onProgress(count) {
    console.log(`当前加载了${count}`);
  },
  /**
   * 自定义加载器,如果是web可以省略,如果是小程序可以用类似于如下的示例,只要返回一个promise即可
   * 也可以使用定时器模拟加载loading也是支持的
   */
  customLoader(url) {
    // 这个位置会把imageUrls中的每一项打印一次
    console.log(url);
    return new Promise((resolve) => {
      wx.getImageInfo({
        success: resolve,
      });
      // setTimeout(resolve, 500);
    });
  },
});

preloadImage.start();
  • imageUrls 代表要预加载的资源地址
  • onLoaded 是资源全部加载完毕的 callback
  • onProgress 是资源加载过程中的 callback,其中的参数 count 代表当前加载的资源的数量,可以通过 countimageUrls 数组的长度求得当前的进度
  • isSerial 是否串行加载,开启串行加载后,资源会串行加载,即加载完一个后加载下一个,缺省时默认为 false。
  • maxConcurrencyCount 最大并行加载数量,默认为 6,仅在并行加载时生效。
  • customLoader 自定义加载器,如果是 web 可以省略该可选参数,如果是小程序可以用类似于如下的示例,只要返回一个 promise 即可,也可以使用定时器模拟加载 loading 也是支持的