一个简单的图片加载器 images-preloader

一、起因

在公司实际业务开发过程中，经常遇到需要加载大量图片的需求。然而有时因为图片请求过多，网络等因素，导致用户端页面加载缓慢，序列帧动画失帧、跳动等问题。造成很不好的用户体验。

为解决这一方面问题，可以从两方面着手：

一是优化请求数量，图片大小。

二是在用户交互上做优化，添加进度条，等待图片全部加载完之后，再启动序列帧动画。

为了方便以后开发，写了个小工具images-preloader。

二、源代码

/**
 * @param images 要加载的图片地址列表，['aa/asd.png','aa/xxx.png']
 * @param callback 每成功加载一个图片之后的回调， “已加载的图片总数/要加载的图片总数”表示进度
 * @param timeout 每个图片加载的超时时间，默认为3s
 */
export default function imagesPreloader(images, callback, timeout) {
    timeout = timeout || 3000;
    images = Array.isArray(images) && images || [];
    callback = typeof (callback) === 'function' && callback;
    let total = images.length,
        loaded = 0;

// 图片序列预加载
    for (let i = 0; i < total; i++) {
        const img = new Image()
        img.src = images[i]
        img.onload = img.onerror = () => {
            loaded < total && (++loaded, callback && callback(loaded / total));
        }
    }
    //延时强制加载完成
    setTimeout(() => {
        loaded < total && (loaded = total, callback && callback(loaded / total));
        console.log('强制加载完成')
    }, timeout * total);
}

三、结语

这个工具可以检测图片是否全部加载完成，并且可以自定义超时时间。