Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jquery.lazyload 實現圖片延遲加載jquery插件

jquery.lazyload 實現圖片延遲加載jquery插件

發布時間:2013-08-30   編輯:www.4271936.live
看到了淘寶產品介紹中,圖片是在下拉滾動條時加載,這是一個很不錯的用戶體驗。減少了頁面加載的時間了,也減輕了服務器的壓力,就查了下用JQuery..
看到了淘寶產品介紹中,圖片是在下拉滾動條時加載,這是一個很不錯的用戶體驗。減少了頁面加載的時間了,也減輕了服務器的壓力,就查了下用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" />

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

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

LazyLoad(延遲加載)技術不僅僅用在對網頁中圖片的延遲加載,對數據同樣可以,Google Reader和Bing圖片搜索就把
LazyLoad技術運用的淋漓盡致;

您可能感興趣的文章:
jQuery lazyLoad圖片延遲加載插件的優化改造方法分享
jquery.lazyload 實現圖片延遲加載jquery插件
使用jquery插件實現圖片延遲加載技術詳細說明
jquery 插件實現圖片延遲加載效果代碼
jquery延遲加載外部js實現代碼
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
jquery圖片延遲加載 前端開發技能必備系列
基于jquery的lazy loader插件實現圖片的延遲加載[簡單使用]
Jquery uploadify圖片上傳插件無法上傳的解決方法
jquery實現鼠標拖動圖片效果示例代碼

[關閉]
微信下载APP完成任务如何赚钱 安徽十一选五遗漏数据 快乐十分下载手机最新版 怎样查安徽快3遗漏号码 陕西11选5中奖规则 关于st股票涨跌限制 江西11选五5任一怎么玩 七星彩出过7个同号 股票期货配资公司 快乐10分走势图360 三期内必开一期王中王