圖片懶加載小當心得

前段時間看了京東大牛分享的前端技術，其中就有一個圖片懶加載的內容。而後本身試了試，感受挺好的。

爲何要懶加載（延遲）：對於圖片過多的頁面，爲了加速頁面加載速度，因此不少時候咱們須要將頁面未出如今可視區域內的圖片先不作加載，等到滾動到可視區域後再去加載。這樣子對於頁面加載性能上會有很大的提高，也提升了用戶的體驗。

實現的原理：實現的原理其實很簡單，在頁面載入的時候將頁面上的img標籤的src指向一個小圖片，把真實地址存放在一個自定義屬性中，這裏我使用data-src來存放，以下：<img src="loading.gif"data-src="http://xxx.ooo.com"/>

而後將頁面img標籤獲取並保存，開啓一個定時器，遍歷保存的img標籤，判斷其位置是否出如今了可視區域，若是出如今可視區域了那麼就把真實的src地址給賦值上。而且從數組中刪除，避免重複判斷。如何判斷是否出如今可視區域內呢？你能夠獲取當前img的相對於文檔頂的偏移距離減去scrollTop的距離，而後和瀏覽器窗口的高度進行比較，若是小於瀏覽器窗口則出如今了可視區域內了，反之，則沒有。

在html中

<img src="image/loading.gif" data-src="http://image6.huangye88.com/2013/03/28/2a569ac6dbab1216.jpg">

在js中實現的代碼：

$(function(){
    $(window).scroll(function() {
        array = $("img");
        $("img").each(function () {
            if ( ( $(this).offset().top - $(document).scrollTop()) < $(window).height() ){
                $(this).attr('src',$(this).attr('data-src'));
                array.splice($(this),1);
            }
        })


    })
})

這樣就行了 推薦適用於移動端頁面的使用