圖片惰性載入 DEMO 地址 -> 圖片惰性載入（放在了 Github 上，所以可能會慢，最好用 chrome）

關於惰性載入

在講圖片的惰性載入前，我們先來聊聊惰性載入。惰性載入又稱為延遲載入、懶載入等，還有個好聽的英文名字叫做 "lazyload"。需要注意的是，惰性載入並不只是圖片的專利，Javascript 中函式也有惰性載入的概念（詳見 高效能JavaScript 程式設計實踐 "不要重複工作" 一節），而在 Javascript 非同步載入中還有個 LazyLoad類庫，而圖片的惰性載入庫（lazyload）與之完全是兩個概念，這些一定要弄清楚，以免混淆概念。

圖片的惰性載入是啥意思？為什麼要用它？當我們頁面上的東西越來越豐富的時候，我們發現頁面的載入速度卻越來越慢，而圖片的載入量無疑是 HTTP 請求裡面的大頭。其實很多時候，你把整個頁面載入完，使用者卻不會滑動到最下面，也就是說很多東西其實白白載入了。因為圖片的載入是大頭，所以我們先拿圖片開刀

實現

圖片的惰性載入實現方式其實很簡單。

• 在 HTML 檔案中將需要惰性載入的圖片的 src 屬性置為一個相同的地址（一般設定為一張 loading 圖），這樣這張圖只會載入一次（第二次即會讀取快取），或者乾脆置為空（使用者體驗不好），將真實的圖片地址儲存在別的屬性中（比如 data-original 屬性)
• 監聽事件（比如 scroll 事件），判斷需要惰性載入的圖片是否已經在可視區域，如果是，則將 src 屬性替換成 data-original 屬性值

接著我們來簡單寫下程式碼。

首先，按照第一步將真實的圖片地址藏在 data-original 屬性中。這裡我假設所有圖片都要進行惰性載入，現實開發中如果肯定是在第一屏的圖片，它的 src 完全可以直接指向真實的地址。

複製程式碼<ul>
  <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'
 
/></li>
  <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
  <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
</ul>

因為我把所有圖片都設定為惰性載入模式，而首屏的圖片需要直接顯示，這裡我寫了個 init() 函式，註釋都在程式碼中了：

複製程式碼function init() {
  var images = document.images;
  // 載入首屏圖片
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    // 如果在可視區域並且還沒被載入過
    if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      // 先呼叫 HTML5 方法
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    } else {  // 假設圖片標籤在 HTML 中的順序和實際頁面中順序一致
      break;
    }
  }
}

程式碼中寫了個 imageLoaded() 函式來將真實的圖片地址指向元素，如果直接將 data-original 屬性值指向圖片的 src 屬性的話，看到的圖片可能會一段一段出現，而先將圖片完全載入，然後再賦值使圖片出現的話，體驗就好多了。

複製程式碼function imageLoaded(obj, src) {
  var img = new Image();
  img.onload = function() {
    obj.src = src;
  };
  img.src = src;
}

OK，接著我們監聽 scroll 事件。當用戶滑動頁面，圖片出現在可視區域時，隨即載入圖片。

複製程式碼window.onscroll = function() {
  lazyload();
};

function lazyload() {
  var lazy = 0;
  var images = document.images;
  for (var i = 0, len = images.length; i < len; i++) {
    var obj = images[i];
    if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
      obj.isLoad = true;
      if (obj.dataset) 
        imageLoaded(obj, obj.dataset.original);
      else 
        imageLoaded(obj, obj.getAttribute('data-original'));
    }
  }
}

有的時候並不能當圖片剛好在可視區域的時候再去載入，而要稍微 "預載入"，可以調整下 lazyload() 函式中的 lazy 引數。

如果 "生硬" 地顯示圖片體驗不大好，也可以搞點淡出效果，具體就不說了，可以看完整程式碼 Github

這樣，一個簡單的圖片惰性載入 DEMO 就完成了！

PS：惰性載入雖然好處多多，但是也有一個 "非致命" 的缺點，影響 SEO。因為圖片都被替換成假的圖片，所以會影響圖片的收錄，所以這功能不建議在詳情頁使用