快捷導(dǎo)航

jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件

更新時(shí)間：2010年02月06日 12:40:21 作者：

看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶(hù)體驗(yàn)。減少了頁(yè)面加載的時(shí)間了，也減輕了服務(wù)器的壓力，就查了下用JQuery..

什么是ImageLazyLoad技術(shù)
在頁(yè)面上圖片比較多的時(shí)候，打開(kāi)一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占的幾M的空間。ImageLazyLoad技術(shù)就是，當(dāng)前可見(jiàn)界面的圖片是加載進(jìn)來(lái)的，而不可見(jiàn)頁(yè)面（通過(guò)滾動(dòng)條下拉可見(jiàn)）中的圖片是不加載的，這樣勢(shì)必會(huì)引起速度上質(zhì)的提升。

怎么實(shí)現(xiàn)ImageLazyLoad

一、使用JQuery插件，插件名: jquery.lazyload（7kb大小），壓縮后（3kb大小）

在線(xiàn)壓縮js http://closure-compiler.appspot.com/home
雖然是很牛X的特效,不過(guò)用JQuery插件只需要短短幾句代碼,使用過(guò)程如下:

1.導(dǎo)入JS插件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2.在你的頁(yè)面中加入如下的javascript：

$("img").lazyload();

這將會(huì)使所有的圖片都延遲加載。

當(dāng)然插件還有幾個(gè)配置項(xiàng)可供設(shè)置。

1.改變threshold

$(“img”).lazyload({ threshold : 200 });

把閥值設(shè)置成200 意思就是當(dāng)圖片沒(méi)有看到之前先load 200像素。

2.當(dāng)然了你也可以通過(guò)設(shè)置占位符圖片和自定事件來(lái)觸發(fā)加載圖片事件

復(fù)制代碼代碼如下:

 
$("img").lazyload({ 
placeholder : "img/grey.gif", 
event : "click" 
}); 

3.可以通過(guò)定義effect 參數(shù)來(lái)定義一些圖片顯示效果

復(fù)制代碼代碼如下:

 
$("img").lazyload({ 
placeholder : "img/grey.gif", 
effect : "fadeIn" 
}); 

LazyLoad(延遲加載)技術(shù)不僅僅用在對(duì)網(wǎng)頁(yè)中圖片的延遲加載，對(duì)數(shù)據(jù)同樣可以，Google Reader和Bing圖片搜索就把
LazyLoad技術(shù)運(yùn)用的淋漓盡致；
缺陷：
1.與Ajax技術(shù)的沖突；
2.圖片的延遲加載，遇到高度特別高的圖片，會(huì)出現(xiàn)停止加載的問(wèn)題；
3.寫(xiě)代碼不規(guī)范的同學(xué)要注意了，不管由于什么原因，如果您的頁(yè)面中，img標(biāo)簽的height屬性未定義，那么我建議您最好不要使用ImageLazyLoad

大家可以直接采用淘寶的延遲加載技術(shù):(2kb大小)
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js
調(diào)用方法也是很簡(jiǎn)單的：
<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>
注：該腳本依賴(lài) yahoo-dom-event, 頁(yè)面中需要加載 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>

配置參數(shù)如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
KISSY.ImageLazyload({ 
mod: "manual", // 延遲模式。默認(rèn)為 auto 
diff: 200 // 當(dāng)前屏幕下多遠(yuǎn)處的圖片開(kāi)始延遲加載。默認(rèn)兩屏外的圖片才延遲加載 
}); 
</script> 

manual 模式時(shí)，需要手動(dòng)將頁(yè)面中需要延遲加載的圖片的 src 屬性名更改為 data-lazyload-src. 比如 SRP 頁(yè)面，寶貝列表的后20個(gè)圖片延遲加載。輸出時(shí)，html 代碼為：

如果您是Jquery，Prototype等這些JS框架的粉絲，他們都有定制的LazyLoad Plugin提供；

可查看http://www.appelsiini.net/projects/lazyload

LazyLoad(延遲加載)技術(shù)不僅僅用在對(duì)網(wǎng)頁(yè)中圖片的延遲加載，對(duì)數(shù)據(jù)同樣可以，Google Reader和Bing圖片搜索就把
LazyLoad技術(shù)運(yùn)用的淋漓盡致；

您可能感興趣的文章: