h5实战｜图片预加载和加载进度条

在之前开发周年庆活动的过程中，需要实现页面加载时预加载图片，并展示一个加载进度条，让用户了解加载进度。查阅了相关资料（原文链接放在最后啦），实现的思路主要如下：

1. 创建一个函数用于new一个image对象
2. 遍历需要预加载的图片数组，设置图片的src属性为传入的 URL，从而触发图片的加载

export function preloadImage(url) {
    console.log(url)
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
 
        img.onload = () => {
          resolve(img);
        };
 
        img.onerror = (err) => {
          reject(err);
        };
  });  
}

4. 在每个图片加载成功后，用数组长度计算出百分比更新加载进度

loadingProgress: 0, // 图片加载进度

// 预加载
async preloadImages() {
    const imageUrls = [
        require('../../static/index/hone-rainbow.png'),
        require('../../static/index/hone-bg.png'),
        //...你的图片
    ];
    const totalImages = imageUrls.length;
    let loadedImages = 0;
 
    for (const imageUrl of imageUrls) {
        try {
            await preloadImage(imageUrl);
            loadedImages++;
            this.loadingProgress = (loadedImages / totalImages) * 100; // 更新进度
        } catch (error) {
            console.error(error);
        }
    }
}

5. 如果需要批量引入项目静态资源文件，可以用此方法：

const imageUrls = import.meta.glob('/public/imgs/*.*',{eager:true})

到这里基本的功能已经完成啦，在项目中建议将这些代码封装成hook，方便复用和管理，代码的功能模块也更加明确；进度条样式的话一般是使用框架组件，或者根据产品需求手写样式。

原文链接：blog.csdn.net/qq_41221596…