在前端開發中，對頁面花裡胡哨度[注1]要求越高的頁面，用到的圖片、音訊什麼的就越多，比如什麼結婚請柬、展會請柬、釋出會宣傳頁、資料大屏。雖然現在瀏覽器不允許網頁在沒有使用者互動的情況下播放音訊，但是，我們依舊要在頁面展現的同時，準備好所有的靜態資源。
注1：花裡胡哨度（garish degree），又名難做指數，江湖人稱領導開心點
預載入即提前載入，瀏覽器在請求一張圖片時，會快取到本地，在下次請求同樣的地址時，會直接在本地快取讀取（304），在本地讀取的時間基本可以忽略不計。如果我們能夠在圖片未載入完成時給使用者一個載入進度，提示使用者：「急什麼，馬上完事！」，則能夠有效的提升使用者體驗。
相信同學都瞭解圖片的預載入：
let img = new Image()
img.src = "@/../../xx.png"
img.onload = () => {
//...
}
這是為大家所熟知的預載入方式，但是這種方法只適用於單張圖片的預載入。
那多張怎麼做呢？
很簡單，我們給圖片們定義一個陣列就好了
let imagesPathArr = ["@/../../xx.png","@/../../yy.png","..."];
然後我們再用迴圈去載入這些圖片
let count = 0
for (let item of imagesPathArr) {
let img = new Image()
img.src = item
img.onload = () => {
count++
if (count === imagesPathArr.length) {
// ... 載入完成
}
}
}
我們甚至可以通過count/imagesPathArr.length算出載入的百分比 。
沒錯，但是這種方法載入十張圖片還可以，那載入一百張呢？
同學說：「我可以把圖片從0-99命名，載入時只需要迴圈一百次就可以了！」
可以，那麼假如我們用python寫了一個重新命名指令碼，把這一百張圖片從0-99命名完成。
那麼我們的程式碼就長這樣：
for(let i = 0;i<=99;i++){
let img = new Image()
img.src = `@/../../${i}.png`
img.onload = () => {
count++
if (count === imagesPathArr.length) {
// ... 載入完成
}
}
}
ok，看起來沒有任何問題，實際上也沒有任何問題。
但是在使用過程中，我們會發現，圖片的格式不一定是統一的（當然你可以將他們轉換成統一的），而且這種方式看起來太醜了，一點也不夠優雅。
那麼有沒有一種方式，優雅的預載入呢？有。
要實現優雅的預載入，我們要優哪些方面？
他