在vuecli中写一个公共方法去预加载图片

首先,在js里创建文件_preLoad.js,代码如下:

// 预加载函数,接受数组参数
async function _preLoad(imgArr) {
  let index = 0;
  // 假死循环
  while (index < imgArr.length) {
    // 这里接受的是promise对象
    await _preLoadImg(imgArr[index]);
    index++;
  }
  return true;
}
function _preLoadImg(imgSrc) {
  return new Promise((resolve) => {
    let img = new Image();
    img.addEventListener(
      "load",
      () => {
        resolve(true);
      },
      { once: true }
    );
    img.src = imgSrc;
  });
}
export default _preLoad;

这里之所以添加事件监听的时候要加上{ once: true }，是因为不添加的话每次循环会重复添加事件监听影响性能。
然后是在main.js里全局引入，再挂载在原型链上，代码如下：

import _preLoad from "../src/assets/js/_preLoad";
Vue.prototype._preLoad = _preLoad;

最后是页面代码

// preLoadImg用来装预加载图片的数组
let preRes = await this._preLoad(this.preLoadImg);
if (preRes) {
  // 关闭动画
  this.$store.commit("closeLoadAnimationState");
}