jquery.lazyload是一個實現(xiàn)圖片延遲加載的jQuery 插件，它可以延遲加載長頁面中的圖片。在瀏覽器可視區(qū)域外的圖片在初始狀態(tài)下不會被載入，直到用戶將頁面滾動到它們所在的位置。

1.引入js文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

2.img標簽

<img >"lazy" src="images/placeholder.gif" data-original="images/example.png"  width="600"/">

img標簽的src指向一個圖片占位符，這里推薦一個在線獲取圖片占位符的站點 > http://placehold.it/，真實圖片路徑在data-original中。

3.調(diào)用lazyload

$("img.lazy").lazyload();

圖片的占位符除了可以通過src屬性來指定，也可以通過lazyload函數(shù)的參數(shù)來指定：

$("img.lazy").lazyload({    placeholder: "images/placeholder.gif" });

4.占位圖片事件觸發(fā)加載

如果我們希望滾到到圖片的位置后，還要通過click或hover事件來喚醒圖片的加載，我們可以指定lazyload函數(shù)的event屬性：

$("img.lazy").lazyload({    placeholder: "images/placeholder.gif",    event: "click" });

當圖片完全加載的時候，插件默認地使用show()方法來將圖顯示出來。你也可以使用其他的效果，如fadeIn：

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

5.提前加載圖片

lazyload插件默認用戶滾動到圖片位置時才觸發(fā)加載圖片，如果我們希望滾動到距離圖片一定位置就觸發(fā)加載，可以指定lazyload函數(shù)的threshold參數(shù)：

$(“img.lazy”).lazyload({threshold: 200 });

這樣，當用戶滾動到距離圖片200像素時圖片就開始加載了。

6.設(shè)置查找圖片張數(shù)

lazyload的實現(xiàn)原理是，在頁面滾動時，會搜索未加載的圖片，如果圖片在可視范圍內(nèi)就加載，默認情況下當找到第一張不在可見區(qū)域的圖片時就會停止搜索。而搜索的順序就是HTML文檔中dom節(jié)點的定義順序，所以如果有些圖片定義在前面，但由于頁面不好的布局圖片將會呈現(xiàn)在后面，那么就會導致圖片沒辦法正常顯示。

此時我們可以通過lazyload函數(shù)的failure_limit參數(shù)：

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

這樣一來，插件會搜索至少10個未加載的圖片才停止搜索，如果你的圖片布局比較不規(guī)則，可以嘗試將這個參數(shù)調(diào)大。