加入頁面中有多張這樣的圖片需要加載。具體的Javascript實(shí)現(xiàn)邏輯如下，在文檔的DOMContentLoaded事件中，添加延遲加載處理邏輯，首先獲取class屬性名為lazy的所有〈img〉標(biāo)簽，將這些標(biāo)簽暫存在一個名為lazyImages的數(shù)組中，表示需要進(jìn)行延遲加載但還未加載的圖片集合。當(dāng)一個圖片被加載后，便將其從lazyImages數(shù)組中移除，直到lazyImages數(shù)組為空時，表示所有待延遲加載的圖片均已經(jīng)加載完成，此時便可將頁面滾動事件移除。

這里使用了getBoundingClientRect（）函數(shù)獲取元素的相對位置.

        rectObject = object.getBoundingClientRect();

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

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

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

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

對于只可上下滾動的頁面，判斷一個圖片元素是否出現(xiàn)在屏幕視窗中的方法其實(shí)顯而易見，即當(dāng)元素上邊緣距屏幕視窗頂部的top值小于整個視窗的高度window.innerHeight時，預(yù)加載的事件處理代碼如下：

document.addEventListener(DOMContentLoaded, function() {      const imags = [].slice.call(document.querySelector('.lazy'))      const active = false; // 限制函數(shù)被頻繁調(diào)動      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)    })

這種方式的有點(diǎn)就是兼容性比較好，缺點(diǎn)是頻繁地進(jìn)行計(jì)算必然會影響性能，代碼也會比較繁瑣。

實(shí)現(xiàn)圖片的延遲加載：Intersection Observer方式

現(xiàn)代瀏覽器已大多支持了Intersection Observer API，用一句話簡述：每當(dāng)因頁面滾動或窗口尺寸發(fā)生變化，使得目標(biāo)元素（target）與設(shè)備視窗或其他指定元素產(chǎn)生交集時，便會觸發(fā)通過Intersection Observer API配置的回調(diào)函數(shù)，在該回調(diào)函數(shù)中進(jìn)行延遲加載的邏輯處理，會比傳統(tǒng)方式顯得更加簡潔而高效。

簡單來說，目標(biāo)元素的可見性變化時，就會調(diào)用觀察器的回調(diào)函數(shù) callback。

callback一般會觸發(fā)兩次。一次是目標(biāo)元素剛剛進(jìn)入視口（開始可見），另一次是完全離開視口（開始不可見）。

 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)          })        }         })

這種方式判斷元素是否出現(xiàn)在視窗中更為簡單直觀，應(yīng)在實(shí)際開發(fā)中盡量使用，但其問題是并非所有瀏覽器都能兼容。

（1）做好盡量完備瀏覽器兼容性檢查，對于兼容Intersection Observer API的瀏覽器，采用這種方式進(jìn)行處理，而對于不兼容的瀏覽器，則切換回傳統(tǒng)的實(shí)現(xiàn)方式進(jìn)行處理。 （2）使用相應(yīng)兼容的polyfill插件，在W3C官方GitHub賬號下就有提供。

實(shí)現(xiàn)圖片的延遲加載：CSS類名方式

這種實(shí)現(xiàn)方式通過CSS的background-image屬性來加載圖片，與判斷〈img〉標(biāo)簽src屬性是否有要請求圖片的URL不同，CSS中圖片加載的行為建立在瀏覽器對文檔分析基礎(chǔ)之上。

  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)          })        }         })

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

原生的延遲加載支持

除了上述通過開發(fā)者手動實(shí)現(xiàn)延遲加載邏輯的方式，從Chrome 75版本開始，已經(jīng)可以通過〈img〉和〈iframe〉標(biāo)簽的loading屬性原生支持延遲加載了，loading屬性包含以下三種取值。

● lazy：進(jìn)行延遲加載。 ● eager：立即加載。 ● auto：瀏覽器自行決定是否進(jìn)行延遲加載。

測試：image標(biāo)簽就是 img

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>document</title>  <!-- <script src=nnzzn/skin/m04blueskin/image/nopic.gif -->  <!-- <script src=nnzzn/skin/m04blueskin/image/nopic.gif -->  <!-- <link rel="stylesheet" href="css/index.css"> -->  <style>    img {      width: 700px;      height: 200px;      display: block;    }  </style></head><body>      <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />    <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />    <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" />  <imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /><imgage loading="lazy" src=nnzzn/skin/m04blueskin/image/nopic.gif alt="photo" /></body></html>

可以看到，首次加載的個數(shù)是13個，首屏一般只能放下4個左右，13個以后的img滾動到視線內(nèi)部會自動去加載。

實(shí)踐發(fā)現(xiàn)有以下幾個特點(diǎn)：

1. Lazy loading加載數(shù)量與屏幕高度有關(guān)，高度越小加載數(shù)量越少，但并不是線性關(guān)系。
2. Lazy loading加載數(shù)量與網(wǎng)速有關(guān)，網(wǎng)速越慢，加載數(shù)量越多，但并不是線性關(guān)系。
3. Lazy loading加載沒有緩沖，滾動即會觸發(fā)新的圖片資源加載。
4. Lazy loading加載在窗口resize尺寸變化時候也會觸發(fā)，例如屏幕高度從小變大的時候。
5. Lazy loading加載也有可能會先加載后面的圖片資源，例如頁面加載時滾動高度很高的時候。

與Javascript有關(guān)的幾個行為特征：

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