http://webdev.brunoxu.info/archives/421.html
看到了淘寶產品介紹中,圖片是在下拉滾動條時加載,這是一個很不錯的用戶體驗。減少了頁面加載的時間了，也減輕了服務器的壓力，就查了下用JQuery..
什麼是ImageLazyLoad技術
在頁面上圖片比較多的時候，打開一張頁面必然引起與服務器大數據量的交互。尤其是對於高清晰的圖
片，佔的幾M的空間。ImageLazyLoad技術就是，當前可見界面的圖片是加載進來的，而不可見頁面（通過滾動條下拉可見）中的圖片是不加載的，這
樣勢必會引起速度上質的提升。
怎麼實現ImageLazyLoad
一、使用JQuery插件 ，插件名: jquery.lazyload（7kb大小），壓縮後（3kb大小）
在線壓縮js http://closure-compiler.appspot.com/home
雖然是很牛X的特效,不過用JQuery插件只需要短短几句代碼,使用過程如下:
1.導入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="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
二、大家可以直接採用淘寶的延遲加載技術:(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
調用方法也是很簡單的：
<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
"
type="text/javascript"></script> <script
type="text/javascript">// <![CDATA[KISSY.ImageLazyload();//
]]></script>
注：該腳本依賴 yahoo-dom-event, 頁面中需要加載 yui 2.x,你也可以直接引用下面的地址:
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js
" type="text/javascript"></script>
配置參數如下：
複製代碼
代碼如下:
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", // 延遲模式。默認爲 auto
diff: 200 // 當前屏幕下多遠處的圖片開始延遲加載。默認兩屏外的圖片才延遲加載
});
</script>
manual 模式時，需要手動將頁面中需要延遲加載的圖片的 src 屬性名更改爲 data-lazyload-src. 比如 SRP 頁面，寶貝列表的後20個圖片延遲加載。 輸出時，html 代碼爲：
<img data-lazy-src="path/to/img" alt="something" />
三、如果您是Prototype等這些JS框架的粉絲，他們都有定製的LazyLoad Plugin提供；
可查看http://www.appelsiini.net/projects/lazyload
LazyLoad(延遲加載)技術不僅僅用在對網頁中圖片的延遲加載，對數據同樣可以，Google Reader和Bing圖片搜索就把LazyLoad技術運用的淋漓盡致；