JQuery實現圖片懶加載

懶加載的原因：

對於圖片過多的場景，為了提高頁面的加載速度，降低服務器的負載，增強用戶體驗，我們對還沒出現在視野的圖片先不加載，當元素出現在我們視野中的時候再加載。

懶加載的原理：

我們先將img標簽中的src鏈接設置為一樣的圖片（空白圖片），將真正的圖片鏈接放在自定義屬性中，如（data-src），當js監聽到圖片元素進入到可視窗口的時候，將自定義屬性中的地址存儲到src中，達到懶加載的效果。

jQuery實現圖片懶加載的原理。它的基本思想是：在輸出HTML的時候，不要直接輸出<img src="xxx">，而是輸出如下的img標簽：

<img src="loading.gif" data-src="http://真正的圖片地址/xxx.jpg">
因此，頁面顯示的圖片是一個gif加載動畫。當頁面滾動時，如果圖片出現在屏幕中，就利用jQuery把<img>的src屬性替換為data-src的內容，瀏覽器就會實時加載。
JavaScript代碼如下:

// 注意: 需要引入jQuery
$(function() { // 獲取window的引用:
    var $window = $(window); // 獲取包含data-src屬性的img，並以jQuery對象存入數組:
    var lazyImgs = $.map($('img[data-src]').get(), function (i) { return $(i); }); // 定義事件函數:
    var onScroll = function() { // 獲取頁面滾動的高度: scrollTop()獲取匹配元素相對滾動條頂部的偏移。
        var wtop = $window.scrollTop();//頁面滾動的高度就是窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離
        // 判斷是否還有未加載的img:
        if (lazyImgs.length > 0) { // 獲取可視區域高度:
            var wheight = $window.height(); // 存放待刪除的索引:
            var loadedIndex = []; // 循環處理數組的每個img元素:
            $.each(lazyImgs, function ($i, index) { // 判斷是否在可視范圍內:
                if ($i.offset().top - wtop < wheight) {  //$.offset().top獲取匹配元素距離文本文檔頂的距離。
                    // 設置src屬性:
                    $i.attr('src', $i.attr('data-src')); // 添加到待刪除數組:
                    loadedIndex.unshift(index);//從大到小排序，保證下邊刪除操作能順利進行
 } }); // 刪除已處理的對象:
            $.each(loadedIndex, function (index) { lazyImgs.splice(index, 1); }); } }; // 綁定事件:
 $window.scroll(onScroll); // 手動觸發一次:
    onScroll();

 

 

onScroll()函數最后要手動觸發一次，因為頁面顯示時，並未觸發scroll事件。如果圖片已經在可視區域內，這些圖片仍然是loading狀態，需要手動觸發一次，就可以正常顯示。
轉自廖雪峰的文章