原文：https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000
在網頁中，常常需要用到圖片，而圖片需要消耗較大的流量。正常情況下，瀏覽器會解析整個HTML代碼，然后從上到下依次加載<img src="xxx">的圖片標簽。如果頁面很長，隱藏在頁面下方的圖片其實已經被瀏覽器加載了。如果用戶不向下滾動頁面，就沒有看到這些圖片，相當於白白浪費了圖片的流量。
所以，淘寶、京東這些流量非常巨大的電商，商品介紹頁又必須有大量的圖片，因此，這些頁面的圖片都是“按需加載”，即用戶滾動頁面時顯示出來的時候才加載圖片。當網速非常快的時候，用戶並不能感知懶加載的動作，既省流量又不影響用戶瀏覽。
本文給出一種利用jQuery實現圖片懶加載的原理。它的基本思想是：在輸出HTML的時候，不要直接輸出<img src="xxx"，而是輸出如下的img標簽：
<img src="/static/loading.gif" data-src="http://真正的圖片地址/xxx.jpg"> 因此，頁面顯示的圖片是一個gif加載動畫。當頁面滾動時，如果圖片出現在屏幕中，就利用jQuery把<img>的src屬性替換為data-src的內容，瀏覽器就會實時加載。
JavaScript代碼如下：
// 注意: 需要引入jQuery和underscore $(function() { // 獲取window的引用: var $window = $(window); // 獲取包含data-src屬性的img，並以jQuery對象存入數組: var lazyImgs = _.map($('img[data-src]').get(), function (i) { return $(i); }); // 定義事件函數: var onScroll = function() { // 獲取頁面滾動的高度: 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) { // 設置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狀態，需要手動觸發一次，就可以正常顯示。
要測試圖片懶加載效果，可以在Chrome瀏覽器的控制台選擇“Network”，把“Online”改為“Slow 3G”就可以模擬慢速網絡下瀏覽器懶加載圖片的效果：
