目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。
一、方法一
项目打开的时候要对图片进行预加载，在App.vue里面的beforeCreate添加预加载程序
App.vue
beforeCreate(){ let count = 0; let imgs = [ //用require的方式添加图片地址，直接添加图片地址的话，在build打包之后会查找不到图片，因为打包之后的图片名称会有一个加密的字符串 require('xxx') ] for (let img of imgs) { let image = new Image(); image.src = img; image.onload = () => { count++; }; } }
二、方法二
创建两个文件名称分别为imgPreloader.js以及imgPreloaderList.js，前者用于导出图片加载的异步方法imgPreloader，后者用于存放图片列表
然后在main.js里面，Vue对象创建之前，必须先把图片全部加载完才能创建Vue对象并且挂载到#app上
1.imgPreloaderList.js
export default [ require('相对图片地址1'), require('相对图片地址2'), ... ];
2.imgPreloader.js
const imgPreloader = url => { return new Promise((resolve, reject) => { let image = new Image(); image.src = url; image.onload = () => { resolve(); }; image.onerror = () => { reject(); }; }); }; export const imgsPreloader = imgs => { let promiseArr = []; imgs.forEach(element => { promiseArr.push(imgPreloader(element)); }); return Promise.all(promiseArr); };
3.main.js
// 导入图片预加载方法以及图片列表 import { imgsPreloader } from './config/imgPreloader.js'; import imgPreloaderList from './config/imgPreloaderList.js'; (async () => { await imgsPreloader(imgPreloaderList); //关闭加载弹框 document.querySelector('.loading').style.display = 'none'; new Vue({ router, store, render: h => h(App) }).$mount('#app'); })();
4.加载弹框
main.js提到加载弹框，那么这个弹框要加在哪里呢？答案是index.html
<style> /* *加载弹框的样式 */ </style> <body> <div class="loading"> </div> </body>
三、总结
方法二的效果较方法一更符合一般的需求，方法一可能图片还没完全加载完成，就执行beforeMount了。