圖片懶加載插件實戰

不少網站都會用到‘圖片懶加載’這種方式對網站進行優化，即延遲加載圖片或符合某些條件纔開始加載圖片。因而心血來潮，決定本身手動寫一下’圖片懶加載‘插件。

使用這個技術有什麼顯著的優勢？

好比一個頁面中有不少圖片，如淘寶首頁等等，一個頁面有100多的圖片，若是一上來就發送這麼多請求，頁面加載就會很漫長，若是js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就很差辦了。用戶感受這個頁面就會很卡。

懶加載原理：瀏覽器會自動對頁面中的img標籤的src屬性發送請求並下載圖片。經過動態改變img的src屬性實現。

當訪問一個頁面的時候，先把img元素或是其餘元素的背景圖片路徑替換成loading圖片地址（這樣就只需請求一次）

等到必定條件（這裏是頁面滾動到必定區域），用實際存放img地址的laze-load屬性的值去替換src屬性，便可實現’懶加載’。

//即便img的src值爲空，瀏覽器也會對服務器發送請求。因此平時作項目的時候，若是img沒有用到src，就不要出現src這個屬性

先上三個重要的知識點

1.獲取屏幕可視窗口大小：

document.documentElement.clientHeight 標準瀏覽器及低版本IE標準模式

document.body.clientHeight 低版本混雜模式

2.元素相對於文檔document頂部

element.offsetTop

3.滾動條滾動的距離

document.documentElement.scrollTop 兼容ie低版本的標準模式

document.body.scrollTop 兼容混雜模式；

滾動加載：當圖片出如今可視區域時，動態加載該圖片。

原理：當圖片元素頂部是否在可視區域內，（圖片相對於文檔document頂部-滾動條滾動的距離）

實現原理：

首先從全部相關元素中找出須要延時加載的元素，放在element_obj數組中。

function initElementMap() {

      var el = document.getElementsByTagName('img');

      for (var j = 0, len2 = el.length; j < len2; j++) {

  //判斷當前的img是否加載過了，或者有lazy_src標誌  [未完成]

          if (typeof (el[j].getAttribute("lazy_src"))) {

              element_obj.push(el[j]);

              download_count++;

          }

      }

}

2.判斷數組中的img對象，若知足條件，則改變src屬性

function lazy() {

    if (!download_count) return;

    var innerHeight = getViewport();

    for (var i = 0, len = element_obj.length; i < len; i++) {

//獲得圖片相對document的距上距離

        var t_index = getElementViewTop(element_obj[i]);    

        if (t_index - getScrollTop() < innerHeight) {

            element_obj[i].src = element_obj[i].getAttribute("lazy-src");

            delete element_obj[i];

            download_count--;

        }

    }

}

3.滾動的時候觸發事件，1000毫秒後執行lazy（）方法。

window.onscroll = window.onload = function () {

    setTimeout(function () {

        lazy();

    }, 1000)

}

整部分代碼位於閉包自執行函數中。相應的方法放在init中。

var lazyLoad = (function () {  

    function init() {

        initElementMap();

        lazy();

    };

    return {

        init: init    

    }

})();

使用格式 ：src填默認loading圖片地址，真實的圖片地址填在lazy-src屬性裏，切記需指定寬高。在外部調用 lazyLoad.init();

所有的代碼以及例子已經上傳到github上了，地址是：https://github.com/beidan/lazeLoadImg，歡迎star。