记录一下项目中的预加载实现

记录一下项目中的预加载实现

近期在完成一个几乎全部是由图片组成vue的 h5项目，要求是一开始有一个loading加载百分比进度动画。在这期间实现对图片的预加载。

1.在images目录中建一个ts文件

因为这里是vue+ts项目，所以建ts文件，vue+js项目还是建js文件。

1、暴露出图片内容

const imgUrls = [
     require('./1.gif'),
     require('./2.gif'),
     require('./3.gif'),
     require('./4.gif'),
     require('./5.gif'),
];

export default imgUrls;

2、loading加载页进行加载

import imgUrls from "../../images/imgUrls";

  //url: 要加载的图片地址
  preloadImg(url: string) {
    return new Promise<void>((resolve, reject) => {
      const img = new Image();
      img.src = url; // 从这里开始图片被请求
      img.onload = (img) => {
        // TODO: 自定义处理，比如更新当前加载进度
        resolve(img as any);
        this.successCount += 1;
        if (this.successCount == 100) {
        //这里举例图片数量是100，模拟百分比进度条
          this.$emit("getCount", this.successCount);
        }
      };
      img.onerror = () => {
        reject("false");
      };
    });
  }

  async preload() { 
    const preloadPromises: Promise<void>[] = [];
    imgUrls.forEach((url) => {
      preloadPromises.push(this.preloadImg(url));
    });
    try {
      await Promise.all(preloadPromises).then((res: any) => {
        //图片全部加载完成
        let home = Math.random(); //同路由跳转，加随机数
        this.$router.push({
          name: "Home",
          query: {
            c: config.cn,
            home: home as any,
          },
        });
      });
      // 所有图片加载完成后的操作，如跳转到首页
    } catch {
      console.error("预加载图片出错");
    }
  }

3、在loadin页vue钩子函数中调用

 created() {
    //预加载整个images
    this.preload();
  }

--------------------------新手上路，大佬勿喷--------------------------