利用圖片延遲加載來優化頁面性能（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 ☻

插件不免有考慮不周的地方，若是你們有什麼建議或糾正的話，歡迎一塊兒討論：）