圖片懶加載
lazyload用來加載比較長的頁面中的圖片,直到下拉到顯示他們為止,頁面太長的時候使用它可以加快頁面顯示的速度。
1.使用它
使用它只需要引用兩個文件,如下:
<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script>
還要在img的標簽中添加一個屬性,還要給這個img添加一個名字,代碼如下:
<img class="lazy" src='../../images/defaultpic.jpg' data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); });
2.添加一個閥值
可以讓它在還未顯示在屏幕上之前先記載200個像素,代碼如下:
$("img.lazy").lazyload({
threshold : 200
});
3.事件出發
使用click或者onmouseover觸發加載
$("img.lazy").lazyload({
event : "click"
});
作者:Tyler Ning
出處:http://www.rzrgm.cn/tylerdonet/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,如有問題,請微信聯系冬天里的一把火
浙公網安備 33010602011771號