应用场景是项目中有一些访问频率较高的页面,且不希望压缩图片保证显示效果,例如一些宣传类的视觉。这时候我们选择牺牲一些首屏的加载时间,保证后续的访问速度。
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
import { imgsPreloader } from './imgPreloader.js';
imgsPreloader().then(() => {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
})
index.html
<div id="app">
<!-- 这里你可以写一个好看的loading,vue挂载以后会替换dom -->
<p>加载中...</p>
</div>