利用圖片延遲加載來優化頁面性能（jQuery）

圖片延遲加載也稱懶加載，常用於頁面很長，圖片很多的頁面，以電子商務網站居多，比如大家常上的京東，淘寶，頁面以圖居多，整個頁面少說幾百K，多則上兆，如果想一次性加載完成，不僅用戶要哭了，服務器也得哭了。

為了避免這種請況發生，目前主流的做法是頁面初次加載時，只顯示當前可視區域的圖片，當用戶滾動頁面的時候，當圖片進入可視區域時再加載，這樣可以明顯的提高頁面加載速度，而更少的圖片並發請求數，也可以大大的減輕服務器的壓力，可謂一舉多得。

圖片延遲加載的原理比較簡單，先把圖片的真實地址寫在自定義的一個屬性上，比如 data-url（HTML5中以 data- 開頭的自定義屬性都是合法的），src 地址最好不要空着，放一個 1×1 的全透明占位圖片就行了，如：

<img src="images/transparent_img.png" data-url="images/real_img.jpg">

也可以加上如果用戶禁用JS后的替代方案：

<img src="images/transparent_img.png" data-url="images/real_img.jpg" >
<noscript><img src="images/real_img.jpg" ></noscript>

當頁面滾動的時候開始計算圖片是否處在當前窗口的可視區域，如果在的話，就把 src 的假地址替換成 data-url 的真實地址，ok，原理就是這樣，很簡單吧。

網上詳細講解這個效果的很多，例子也不少，大家有興趣可以搜一下。最近在看前端性能優化方面的東西，正好上午沒事想寫個插件練練手，就寫了這個簡單的延遲加載的插件，基於 jQuery，代碼不多，只有 60 行：

 

/*
* 基於jQuery的圖片延遲加載插件
* by Hey@feelcss (http://www.feelcss.com/)
* 2012-07-12
*/
;(function($){
  $.fn.imgLazyLoading = function(options){
    //定義需要的參數的初始值，並合並options對象到set對象
    var set = $.extend({
      url : "data-url",
      fadeIn : 0
    }, options || {});
    var cache = [];

    $(this).each(function(){
      var nodeName = this.nodeName.toLowerCase();
      var url = $(this).attr(set.url);
      //獲取每個元素的信息
      var data = {
        obj : $(this),
        url : url,
        tag : nodeName
      }
      cache.push(data);
    });

    var lazyLoading = function(){
      $.each(cache,function(i, e){
        var obj = e.obj,
        url = e.url,
        tag = e.tag;
        if(obj){
          var winHeight = $(window).height(); //當前窗口高度
          var scrolltop = $(window).scrollTop(); //滾動條偏移高度
          var oTop = obj.offset().top; //圖片相對高度
          //判斷是否在當前窗口內
          if((oTop-scrolltop) > 0 && (oTop-scrolltop) < winHeight){
            if(tag === "img"){
              if(set.fadeIn){
              //漸出效果
              obj.fadeIn(set.fadeIn);
              }
              //給src屬性賦值
              obj.attr("src", url);
            }else{
              return false;
            }
            e.obj = null;
          }
        }
      });
    }
    //加載后立即執行
    lazyLoading();
    //執行滾動，觸發事件
    $(window).bind("scroll", lazyLoading);
  };
})(jQuery);

下載jquery.imgLazyLoading.js

使用非常簡單，先分別引入 jQuery 和 jquery.imgLazyLoading.js，此插件的方法名就是 imgLazyLoading，直接 element.imgLazyLoading() 就可以了，很簡單：

$(".lazyLoading").imgLazyLoading();

插件比較簡單，可以接收兩個參數：
url： 記錄圖片真實地址的屬性名
fadeIn： 圖片漸出效果以及漸出時間

$(".lazyLoading").imgLazyLoading({
  // 記錄圖片真實地址的屬性名
  url : "data-url",
  // 圖片漸出效果以及漸出時間
  fadeIn : 400
});

最后附上例子：

猛擊demo ☻

插件難免有考慮不周的地方，如果大家有什么建議或糾正的話，歡迎一起討論：）