jquery.lazyload插件實現圖片延遲加載

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

1.引入js文件

 

<script src="//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.調用lazyload

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

圖片的佔位符除了能夠經過src屬性來指定，也能夠經過lazyload函數的參數來指定：

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

4.佔位圖片事件觸發加載

若是咱們但願滾到到圖片的位置後，還要經過click或hover事件來喚醒圖片的加載，咱們能夠指定lazyload函數的event屬性：

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

當圖片徹底加載的時候，插件默認地使用show()方法來將圖顯示出來。你也能夠使用其餘的效果，如fadeIn：

 

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

 

5.提早加載圖片

lazyload插件默認用戶滾動到圖片位置時才觸發加載圖片，若是咱們但願滾動到距離圖片必定位置就觸發加載，能夠指定lazyload函數的threshold參數：

$(「img.lazy」).lazyload({
threshold: 200
});

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

6.設置查找圖片張數

lazyload的實現原理是，在頁面滾動時，會搜索未加載的圖片，若是圖片在可視範圍內就加載，默認狀況下當找到第一張不在可見區域的圖片時就會中止搜索。而搜索的順序就是HTML文檔中dom節點的定義順序，因此若是有些圖片定義在前面，但因爲頁面很差的佈局圖片將會呈如今後面，那麼就會致使圖片沒辦法正常顯示。

此時咱們能夠經過lazyload函數的failure_limit參數：

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

這樣一來，插件會搜索至少10個未加載的圖片才中止搜索，若是你的圖片佈局比較不規則，能夠嘗試將這個參數調大。