应用场景是项目中有一些访问频率较高的页面,且不希望压缩图片保证显示效果,例如一些宣传类的视觉。这时候我们选择牺牲一些首屏的加载时间,保证后续的访问速度。
imgPreloader.js
const imgPreloader = url => {
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = () => {
console.log('加载完成' + image.src)
resolve();
}
image.onerror = () => {
reject();
}
image.src = url;
})
}
export const imgsPreloader = () => {
let promiseArr = [];
// 获取preloadeimgs下的所有文件,这里我的preloadeimgs存储所有的需要预加载的图片
const files = require.context("@/assets/preloadeimgs", false, /./)
files.keys().forEach((file) => {
console.log(file)
promiseArr.push(imgPreloader(require('@/assets/preloadeimgs/' + file.split('/')[1])));
});
return Promise.all(promiseArr);
};
main.js