Lazy Load 是一個用 JavaScript 編寫的 jQuery 外掛. 它可以延遲載入長頁面中的圖片. 在瀏覽器可視區域外的圖片不會被載入, 直到使用者將頁面滾動到它們所在的位置. 這與圖片預載入的處理方式正好是相反的.在包含很多大圖片長頁面中延遲載入圖片可以加快頁面載入速度. 瀏覽器將會在載入可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低伺服器負擔。

　　　　一、下載和引用

　　　　　　Lazy Load 依賴於 jQuery. 所以需要引用2個js

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.lazyload.js"></script>

　　　　二、簡單呼叫

　　　　　　要使用懶載入，需要改變img的src標籤

html程式碼

<img alt="" width="640" height="480" data-original="img/example.jpg" />

js程式碼

$(function() {
    $("img").lazyload();
});

　　這樣設定就會將所有的img的並且擁有data-original標籤的圖片更改為懶載入。

備註：這裡必須設定圖片的width和height,否則外掛可能無法正常工作。

　　上面是最簡單的呼叫，但是一般而言，我們還有一些特殊的需求，比如想要提前一點點載入，避免網路過慢時載入緩慢，載入隱藏圖片等等，lazyload都為我們提供相應的引數。

　　1.設定臨界點

　　　　預設情況下圖片會出現在螢幕時載入. 如果你想提前載入圖片, 可以設定threshold 選項, 如：設定 threshold 為 200 令圖片在距離螢幕 200 畫素時提前載入.
　　　　

$("img").lazyload({
    threshold : 200
});

　　2.使用特效

　　　　預設情況下，影象完全載入並呼叫show()

$("img").lazyload({
    effect : "fadeIn"
});

　　3.當圖片不連續時

　　滾動頁面的時候, Lazy Load 會迴圈為載入的圖片. 在迴圈中檢測圖片是否在可視區域內. 預設情況下在找到第一張不在可見區域的圖片時停止迴圈. 圖片被認為是流式分佈的, 圖片在頁面中的次序和 HTML 程式碼中次序相同. 但是在一些佈局中, 這樣的假設是不成立的. 不過你可以通過 failurelimit 選項來控制載入行為.

$("img").lazyload({
    failure_limit : 20
});

　　將 failurelimit 設為 20 ，當外掛找到 20 個不在可見區域的圖片時停止搜尋.

　　4.載入隱藏圖片

　　當介面有很多隱藏圖片的時候並希望載入他們的時候則使用kip_invisible 屬性，將其設定為false

$("img").lazyload({ 
    skip_invisible : false
});