LazyLoad是一個Js編寫的Jq插件,它可以延遲加載頁面中的圖片,在瀏覽器可視范圍中的圖片會被加載。
如何使用:LazyLoad依賴于Jquery,在html的結尾處 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必須改變圖片的標簽,圖片的地址必須放到data-original屬性上。給懶加載圖片一個指定的class(例如:lazy)代碼如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
這會將所有圖進行延遲加載
設置臨界點
默認情況下只有圖片出現在屏幕時才會加載,如果你想提前加載圖片,那么可以設置threshold,這個屬性的單位是px,不過賦值的時候不用帶px ,呵呵。
設置事件來觸發加載
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});
轉載于:https://www.cnblogs.com/ZaraNet/p/9508016.html