這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

聊聊圖片預載入

關於圖片的載入，不同的需求有不同的實現，比如圖片過多時候的懶載入，為了保證效果的預載入。

如何進行圖片的預載入

前端實現圖片的預載入，其實是利用了瀏覽器的緩存，我們通過 a 標簽來提前載入圖片，如下：

  const img = new Image() 
  img.src = '鏈接' 
  img.onload = function(){ 
      console.log('載入完成')
  }

預載入的策略

在實際的業務中，需求不同，載入的策略不盡相同。

場景一：貪婪載入

剛進入頁面有 loading，需要將後面的圖片全部載入完成。如進入 h5 游戲的時候，需要把後面用到的人物背景圖片都載入出來。

這個時候我們不考慮帶寬的問題，一次性載入所有的圖片。

將每次載入圖片封裝成一次 promise：

new Promise((reslove,reject)=>{ 
    const img = new Image() 
    img.src = '鏈接' 
    img.onload = onerror = resolve 
 })

再使用 promise.all 進行全載入

Promise.all([...])

場景二：部分載入

正常展示當前頁面，但是下個頁面的圖片可以先偷偷載入進來，同時不要影響當前頁面正常圖片的載入。

這時候我們需要考慮帶寬，不能一次性使用載入圖片拉滿，這樣會導致頁面載入的圖片載入不出來。可以使用批量載入，比如每次載入 5 張，載入完 5 張之後再載入下 5 張。這樣如果當前頁面如果有圖片也可以正常展示載入。

具體實現類似分頁一樣，獲取要載入圖片裡面的 5 張，進行載入，直到載入結束。

// 總任務 
function loadImages(list){ 
    const pageSize = 5 
    const pageNum = 0 
    return new Promise((reslove,reject)=>{ 
        function run(){ 
            Promise.all(genetateTasks(list,pageSize,paegNum)).then(()=>{ 
                pageNum++ 
                const hasLength = pageSize * pageNum 
                if(totalNum > hasLength){ 
                    run() 
                }else { 
                    reslove(true) 
                } }) 
           } 
           run() 
 }) }

子任務處理：

// 子任務 
function genetateTasks(list,pageSize,pageNum){
    const promiseArr = [] 
    const start = pageNum * pageSize 
    const end = (pageNum + 1) * pageSize - 1 
    for(let i = start;i<end;i++){ 
        const p = new Promise((reslove,reject)=>{ 
            const img = new Image() 
            img.src = list[i] 
            img.onload = img.onerror = reslove 
         }) 
         promiseArr.push(p) 
    } 
    return promiseArr 
}

註意點

• 在移動端，如果使用貪婪載入，可能會導致你的 loading 圖片都沒有載入出來（因為都去載入預載入的圖片去了），需要將載入圖片的邏輯放在 window.load 事件之後
• 在部分載入的時候，如果需要保證當前頁面的效果，可以在當前頁面圖片載入之後再開始載入（可以使用 imagesloaded）

本文轉載於:

https://juejin.cn/post/7312723056300015628

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。