在網頁中，常常需要用到圖片，而圖片需要消耗較大的流量。正常情況下，瀏覽器會解析整個HTML代碼，然后從上到下依次加載的圖片標簽。如果頁面很長，隱藏在頁面下方的圖片其實已經被瀏覽器加載了。如果用戶不向下滾動頁面，就沒有看到這些圖片，相當于白白浪費了圖片的流量。

所以，淘寶、京東這些流量非常巨大的電商，商品介紹頁又必須有大量的圖片，因此，這些頁面的圖片都是“按需加載”，即用戶滾動頁面時顯示出來的時候才加載圖片。當網速非常快的時候，用戶并不能感知懶加載的動作，既省流量又不影響用戶瀏覽。

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

<img src="/static/loading.gif" data-src="http://真正的圖片地址/xxx.jpg">

因此，頁面顯示的圖片是一個gif加載動畫。當頁面滾動時，如果圖片出現在屏幕中，就利用jQuery把的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”就可以模擬慢速網絡下瀏覽器懶加載圖片的效果：

lazy-loading-test

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的使用jQuery实现图片懒加载原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。