等待图片加载完成

1 定义单个图片的加载函数

函数返回一个 promise

const loadImg = (src, name) => {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = src;

        img.onload = () => {
            resolve({ img, name });
        };

        //   img.onload = resolve(img)  不能这么写，包括下面的reject，因为函数带括号就代表着直接执行，那就相当于onload状态还没到的时候，后面的reslove已经执行了
        img.onerror = (e) => {
            reject(e);
        };
    });
};

注意此处的回调不可以直接写 img.onload = resolve(img) ，因为函数带括号就代表着直接执行，那就相当于 onload 状态还没到的时候，后面的 reslove 已经执行了，reject 同理。

2 定义变量

• 待加载的资源

  const imgs = ['background.png', 'hero.png', 'monster.png'];

• 加载完成后存储到一个对象中

  const imgsObj = {};

3 定义全部图片批量加载的函数

const loadImgs = async (imgs) => {
    try {
        const getImgUrl = (name) => {
            return new URL(`../assets/${name}`, import.meta.url).href;
        };
        const promises = imgs.map((name) => {
            const src = getImgUrl(name);
            return loadImg(src, name);
        });

        const res = await Promise.all(promises);
        res.forEach(({ img, name }) => {
            imgsObj[name] = img;
        });
    } catch (error) {
        console.log('loadImgsErr:', error);
    }
};

次数的 getImgUrl 是 vite 的资源引用方法

4 在 mounted 生命周期中执行

onMounted(async () => {
    await loadImgs(imgs);
});