效果預覽：http:///keleyi/phtml/image/index.htm
使用方法：
1.導入JS插件
<script src="http:///keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http:///keleyi/phtml/image/jquery.lazyload.js" type="text/javascript"></script>
2.在你的頁面中加入如下的javascript：
$("img").lazyload();
這將會使所有的圖片都延遲加載。
當然插件還有幾個配置項可供設置。
1.改變threshold
$(“img”).lazyload({ threshold : 200 });
把閥值設置成200 意思就是當圖片沒有看到之前先load 200像素。
2.當然了你也可以通過設置占位符圖片和自定事件來觸發加載圖片事件
復制代碼 代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
3.可以通過定義effect 參數來定義一些圖片顯示效果
復制代碼 代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
LazyLoad(延遲加載)技術不僅僅用在對網頁中圖片的延遲加載，對數據同樣可以，Google Reader和Bing圖片搜索就把
LazyLoad技術運用的淋漓盡致；
缺陷：
1.與Ajax技術的沖突；
2.圖片的延遲加載，遇到高度特別高的圖片，會出現停止加載的問題；
3.寫代碼不規范的同學要注意了，不管由於什麼原因，如果您的頁面中，img標簽的height屬性未定義，那麼我建議您最好不要使用ImageLazyLoad
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片延遲加載-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/image/jquery.lazyload.js"></script>
</head>
<body>
jquery實現圖片延遲加載效果
<a href="http:///a/bjac/et551617.htm" target="_blank">原文</a><br />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood " /><br />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side " /><br />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/viper_1.jpg" width="765" height="574" alt="Viper 1 " />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner " /><br />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT " />
<img src="http:///keleyi/phtml/image/img/grey.gif" data-original="http:///keleyi/phtml/image/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop " />
<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>
為什麼要延時加載呢？頁面加載的時候就顯示全部的圖片不就得了？有必要多此一舉嗎？答案是肯定的。當要加載的圖片或者內容很多時，如果一次性加載完畢，那麼整個頁面將會加載很久，意味著要用戶等待很久，這是對用戶不友好的。或許你還會問，那不就做個分頁不就得了？其實這種滾動延時加載的技巧正是用來代替手動點擊下一頁的分頁技術。每換一頁都要用戶點擊一次，這也是對用戶不友好的。所以才有了滾動延時加載。
Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在浏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預加載的處理方式正好是相反的.
在包含很多大圖片長頁面中延遲加載圖片可以加快頁面加載速度. 浏覽器將會在加載可見圖片之後即進入就緒狀態. 在某些情況下還可以幫助降低服務器負擔.