目的： 圖片預載入能夠使得用戶在瀏覽後續頁面的時候，不會出現圖片載入一半導致瀏覽不流暢的情況。 一、方法一 項目打開的時候要對圖片進行預載入，在App.vue裡面的beforeCreate添加預載入程式 App.vue 二、方法二 創建兩個文件名稱分別為imgPreloader.js以及imgPre ...
目的： 圖片預載入能夠使得用戶在瀏覽後續頁面的時候，不會出現圖片載入一半導致瀏覽不流暢的情況。
一、方法一
項目打開的時候要對圖片進行預載入，在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了。
