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

·  阅读 1053

一、起因

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

为解决这一方面问题,可以从两方面着手:

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

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

为了方便以后开发,写了个小工具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);
}

复制代码

三、结语

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改