目的： 圖片預加載能夠使得用戶在瀏覽后續頁面的時候，不會出現圖片加載一半導致瀏覽不流暢的情況。
一、方法一
項目打開的時候要對圖片進行預加載，在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了。