原生JS實現圖片懶加載

Demo地址： http://axuebin.com/lazyload

懶加載

什麼是懶加載

懶加載其實就是延遲加載，是一種對網頁性能優化的方式，比如當訪問一個頁面的時候，優先顯示可視區域的圖片而不一次性加載所有圖片，當需要顯示的時候再發送圖片請求，避免打開網頁時加載過多資源。

什麼時候用懶加載

當頁面中需要一次性載入很多圖片的時候，往往都是需要用懶加載的。

懶加載原理

我們都知道HTML中的 <img> 標籤是代表文檔中的一個圖像。。說了個廢話。。

<img> 標籤有一個屬性是 src ，用來表示圖像的URL，當這個屬性的值不爲空時，瀏覽器就會根據這個值發送請求。如果沒有 src 屬性，就不會發送請求。

嗯？貌似這點可以利用一下？

我先不設置 src ，需要的時候再設置？

nice，就是這樣。

我們先不給 <img> 設置 src ，把圖片真正的URL放在另一個屬性 data-src 中，在需要的時候也就是圖片進入可視區域的之前，將URL取出放到 src 中。

實現

HTML結構

<div class="container">
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img1.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img2.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img3.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img4.png">
  </div>
  <div class="img-area">
    <img class="my-photo" alt="loading" data-src="./img/img5.png">
  </div>
</div>

仔細觀察一下， <img> 標籤此時是沒有 src 屬性的，只有 alt 和 data-src 屬性。

alt 屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本。 data-* 全局屬性：構成一類名稱爲自定義數據屬性的屬性，可以通過 HTMLElement.dataset 來訪問。

如何判斷元素是否在可視區域

方法一

網上看到好多這種方法，稍微記錄一下。

1. 通過 document.documentElement.clientHeight 獲取屏幕可視窗口高度
2. 通過 document.documentElement.scrollTop 獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離
3. 通過 element.offsetTop 獲取元素相對於文檔頂部的距離

然後判斷②-③<①是否成立，如果成立，元素就在可視區域內。

方法二（推薦）

通過 getBoundingClientRect() 方法來獲取元素的大小以及位置，MDN上是這樣描述的：

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

這個方法返回一個名爲 ClientRect 的 DOMRect 對象，包含了 top 、 right 、 botton 、 left 、 width 、 height 這些值。

MDN上有這樣一張圖：

可以看出返回的元素位置是相對於左上角而言的，而不是邊距。

我們思考一下，什麼情況下圖片進入可視區域。

假設 const bound = el.getBoundingClientRect(); 來表示圖片到可視區域頂部距離； 並設 const clientHeight = window.innerHeight; 來表示可視區域的高度。

隨着滾動條的向下滾動， bound.top 會越來越小，也就是圖片到可視區域頂部的距離越來越小，當 bound.top===clientHeight 時，圖片的上沿應該是位於可視區域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區域。

也就是說，在 bound.top<=clientHeight 時，圖片是在可視區域內的。

我們這樣判斷：

function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考慮向下滾動加載
  //const clientWidth = window.innerWeight;
  return bound.top <= clientHeight + 100;
}

這裏有個+100是爲了提前加載。

加載圖片

頁面打開時需要對所有圖片進行檢查，是否在可視區域內，如果是就加載。

function checkImgs() {
  const imgs = document.querySelectorAll('.my-photo');
  Array.from(imgs).forEach(el => {
    if (isInSight(el)) {
      loadImg(el);
    }
  })
}

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src;
    el.src = source;
  }
}

這裏應該是有一個優化的地方，設一個標識符標識已經加載圖片的index，當滾動條滾動時就不需要遍歷所有的圖片，只需要遍歷未加載的圖片即可。

函數節流

在類似於滾動條滾動等頻繁的DOM操作時，總會提到“函數節流、函數去抖”。

所謂的函數節流，也就是讓一個函數不要執行的太頻繁，減少一些過快的調用來節流。

基本步驟：

1. 獲取第一次觸發事件的時間戳
2. 獲取第二次觸發事件的時間戳
3. 時間差如果大於某個閾值就執行事件，然後重置第一個時間

function throttle(fn, mustRun = 500) {
  const timer = null;
  let previous = null;
  return function() {
    const now = new Date();
    const context = this;
    const args = arguments;
    if (!previous){
      previous = now;
    }
    const remaining = now - previous;
    if (mustRun && remaining >= mustRun) {
      fn.apply(context, args);
      previous = now;
    }
  }
}

這裏的 mustRun 就是調用函數的時間間隔，無論多麼頻繁的調用 fn ，只有 remaining>=mustRun 時 fn 才能被執行。

實驗

頁面打開時

可以看出此時僅僅是加載了img1和img2，其它的img都沒發送請求，看看此時的瀏覽器

第一張圖片是完整的呈現了，第二張圖片剛進入可視區域，後面的就看不到了~

頁面滾動時

當我向下滾動，此時瀏覽器是這樣

此時第二張圖片完全顯示了，而第三張圖片顯示了一點點，這時候我們看看請求情況

img3的請求發出來，而後面的請求還是沒發出~

全部載入時

當滾動條滾到最底下時，全部請求都應該是發出的，如圖

完整demo

在這哦： http://axuebin.com/lazyload

轉載地址：http://www.tuicool.com/articles/QnYjI3i