jquery.lazyload外掛實現圖片延遲載入
阿新 • • 發佈:2018-12-29
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個未載入的圖片才停止搜尋,如果你的圖片佈局比較不規則,可以嘗試將這個引數調大。