減少了頁面加載的時間了，也減輕了服務器的壓力，看了一下javascript源碼，裡面寫的了lazyload，我就百度了一下，找到了一個jquery的實現這種效果的插件：jquery.lazyload，一個很不錯的插件。
比如你打開一個比較大或者長的網頁，那麼Lazy load能夠實現先加載您所看到區域的圖片，等你滾動到哪裡，就加載那裡的圖片。
如果你是圖片網站，而且一個頁面要加載很多圖片，這個插件是個很不錯的選擇。
如何使用，引用如下js：
查看源代碼打印幫助
代碼如下:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
在你的頁面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會使所有的圖片都延遲加載。插件還有幾個配置項可供設置。
當然對於一些用戶來說就上面的功能遠遠是不能達到要求的，下面我們看看是如何設置靈敏度的。我們可以設置閥值來控制 這個功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設置成200 意思就是當圖片沒有看到之前先load 200像素。當然了你也可以通過設置占位符圖片和自定事件來觸發加載圖片事件
查看源代碼打印幫助
代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
我們還可以通過定義effect 參數來定義一些圖片顯示效果
查看源代碼打印幫助
代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
下載地址：
source,
minified or
packed