> 作者：麥樂
>
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/1319 "恆生LIGHT雲社群")

## 影像延遲載入

想要得到更好的效能體驗，只靠資源壓縮與恰當的檔案格式選型，是很難滿足期望的。我們還需要針對資源載入過程進行最佳化。

### 什麼是延遲載入？

下圖是京東商城的手機端首頁，當元素沒有滑動到視線內時，圖片src屬性放置了一個很小的圖片，init_src屬性放置了真正的圖片，只要當該元素滑動到視線內部，才會將init_src屬性賦值給src去載入真實的圖片，這就是一個簡單的圖片延遲載入的過程。

![A.png](https://developer.hs.net/storage/attachments/2021/08/22/k6424MNBLISgWL474nHexnciIOjFrqXOdVAJiOF8_thumb.png "2866")

![24.png](https://developer.hs.net/storage/attachments/2021/08/22/og6DTsK5QYp7jRWq7DPjPmNG0mw5VdoyxGlzSIFW_thumb.png "2867")

### 傳統方式延遲載入

就是事件監聽的方式，透過監聽scroll事件與resize事件，並在事件的回撥函式中去判斷，需要進行延遲載入的圖片是否進入視窗區域。

我們只需要關注三個屬性。

* class屬性，稍後會在JavaScript中使用類選擇器選取需要延遲載入處理的〈img〉標籤。
* src屬性，載入前的佔位符圖片，可用Base64圖片或低解析度的圖片。
* data-src屬性，透過該自定義屬性儲存圖片真實的URL外鏈。

![80B8FBCF-805E-43c9-AA91-4D9F884B70BD.png](https://developer.hs.net/storage/attachments/2021/08/22/zEJ8G37YPt2WDUKw7cnWcxLhgeyKGbbu5aR6KBUU_thumb.png "2872")

加入頁面中有多張這樣的圖片需要載入。具體的JavaScript實現邏輯如下，在文件的DOMContentLoaded事件中，新增延遲載入處理邏輯，首先獲取class屬性名為lazy的所有〈img〉標籤，將這些標籤暫存在一個名為lazyImages的陣列中，表示需要進行延遲載入但還未載入的圖片集合。當一個圖片被載入後，便將其從lazyImages陣列中移除，直到lazyImages陣列為空時，表示所有待延遲載入的圖片均已經載入完成，此時便可將頁面滾動事件移除。

這裡使用了getBoundingClientRect（）函式獲取元素的相對位置.

```javascript
        rectObject = object.getBoundingClientRect();
```

rectObject.top：元素上邊到視窗上邊的距離;

rectObject.right：元素右邊到視窗左邊的距離;

rectObject.bottom：元素下邊到視窗上邊的距離;

rectObject.left：元素左邊到視窗左邊的距離;

![7.png](https://developer.hs.net/storage/attachments/2021/08/22/HkmMZswnMkbgQvrhAakMvRVTWS8QeT0JpuW5k57k_thumb.png "2869")

對於只可上下滾動的頁面，判斷一個圖片元素是否出現在螢幕視窗中的方法其實顯而易見，即當元素上邊緣距螢幕視窗頂部的top值小於整個視窗的高度window.innerHeight時，預載入的事件處理程式碼如下：

```javascript
document.addEventListener(DOMContentLoaded, function() {
      const imags = [].slice.call(document.querySelector('.lazy'))
      const active = false; // 限制函式被頻繁調動
      function load() {
        if(active === false) {
          active = true
          setTimeout(() => {
            imags.forEach((img) => {
              const objPos = img.getBoundingClientRect();
              if(objPos.top <= window.innerHeight && objPos.bottom >=0 && img.display !== 'done') {
                img.src = img.dataset.src;
                img.classList.remove('lazy')
                imags.filter((i) => (i !== img))
                if(imags.length === 0) {
                  document.removeEventListener('scroll', load)
                  window.removeEventListener('resize', load)
                  window.removeEventListener('orientationchange', load)
                }
  
              }
            })
            active = false
          }, 200)
        }

}

document.addEventListener('scroll', load)
      window.addEventListener('resize', load)
      window.addEventListener('orientationchange', load)

})
```

這種方式的有點就是相容性比較號，缺點是頻繁的進行計算必然會影響效能，程式碼也會比較繁瑣。

### 實現圖片的延遲載入：Intersection Observer方式

現代瀏覽器已大多支援了Intersection Observer API，用一句話簡述：每當因頁面滾動或視窗尺寸發生變化，使得目標元素（target）與裝置視窗或其他指定元素產生交集時，便會觸發透過Intersection Observer API配置的回撥函式，在該回撥函式中進行延遲載入的邏輯處理，會比傳統方式顯得更加簡潔而高效。

簡單來說，目標元素的可見性變化時，就會呼叫觀察器的回撥函式 `callback`。

`callback`一般會觸發兩次。一次是目標元素剛剛進入視口（開始可見），另一次是完全離開視口（開始不可見）。

```javascript
 document.addEventListener(DOMContentLoaded, function() {
        const imags = [].slice.call(document.querySelector('.lazy'))
        if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) {
          var lazyImgObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry)=> {
              if(entry.isIntersecting) {
                var lazyImg = entry.target;
                lazyImg.src = lazyImg.dataset.src;
                lazyImg.classList.remove('lazy');
                lazyImgObserver.unobserve(lazyImg)
              }
            })
          })
          imags.forEach((img) => {
            lazyImgObserver.observe(img)
          })
        }
   
      })
```

這種方式判斷元素是否出現在視窗中更為簡單直觀，應在實際開發中儘量使用，但其問題是並非所有瀏覽器都能相容。

（1）做好儘量完備瀏覽器相容性檢查，對於相容Intersection Observer API的瀏覽器，採用這種方式進行處理，而對於不相容的瀏覽器，則切換回傳統的實現方式進行處理。
（2）使用相應相容的polyfill外掛，在W3C官方GitHub賬號下就有提供。

### 實現圖片的延遲載入：CSS類名方式

這種實現方式透過CSS的background-image屬性來載入圖片，與判斷〈img〉標籤src屬性是否有要請求圖片的URL不同，CSS中圖片載入的行為建立在瀏覽器對文件分析基礎之上。

```javascript
  document.addEventListener(DOMContentLoaded, function() {
        const imags = [].slice.call(document.querySelector('.lazy'))
        if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) {
          var lazyImgObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach((entry)=> {
              if(entry.isIntersecting) {
                var lazyImg = entry.target;
                lazyImg.classList.add('visible');
                lazyImgObserver.unobserve(lazyImg)
              }
            })
          })
          imags.forEach((img) => {
            lazyImgObserver.observe(img)
          })
        }
   
      })
```

![37.png](https://developer.hs.net/storage/attachments/2021/08/22/9zxltOvztYupiU7pPH6ESWCNYntcZOpbHGMGwwja_thumb.png "2870")

這種方式限制於需要提前寫好css樣式。

### 原生的延遲載入支援

除了上述透過開發者手動實現延遲載入邏輯的方式，從Chrome 75版本開始，已經可以透過〈img〉和〈iframe〉標籤的loading屬性原生支援延遲載入了，loading屬性包含以下三種取值。

● lazy：進行延遲載入。
● eager：立即載入。
● auto：瀏覽器自行決定是否進行延遲載入。

測試：image標籤就是 img

```html

```

![C9.png](https://developer.hs.net/storage/attachments/2021/08/22/mdjNaB57MtqAqwjptXYqbs5mfytVMjxm4NeTKlGr_thumb.png "2871")

可以看到，首次載入的個數是13個，首屏一般只能放下4個左右，13個以後的img滾動到視線內部會自動去載入。

實踐發現有一下幾個特點：

1. Lazy loading載入數量與螢幕高度有關，高度越小載入數量越少，但並不是線性關係。
2. Lazy loading載入數量與網速有關，網速越慢，載入數量越多，但並不是線性關係。
3. Lazy loading載入沒有緩衝，滾動即會觸發新的圖片資源載入。
4. Lazy loading載入在視窗resize尺寸變化時候也會觸發，例如螢幕高度從小變大的時候。
5. Lazy loading載入也有可能會先載入後面的圖片資源，例如頁面載入時滾動高度很高的時候。

與JavaScript有關的幾個行為特徵：

1. 判斷瀏覽器是否支援原生loading，最好使用`'loading' in XXX`判斷。
2. 獲取loading屬性值可以直接img.loading；
3. 原生loading不可寫，不可訪問例如HTMLImageElement.prototype.loading會報錯Illegal invocation。
4. 如果要使用，注意做相容性處理。

web前端效能最佳化——圖片載入的最佳化

相關文章