jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼

更新時(shí)間：2010年02月06日 13:57:51 作者：

前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁(yè)的圖片有這樣一種效果：當(dāng)向下拉動(dòng)滾動(dòng)條時(shí)下面的圖片才開(kāi)始加載，就是說(shuō)它不會(huì)一下子把所有的圖片都加載出來(lái)，拉動(dòng)滾動(dòng)條后用戶看到了才會(huì)顯示，這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。

減少了頁(yè)面加載的時(shí)間了，也減輕了服務(wù)器的壓力，看了一下javascript源碼，里面寫的了lazyload，我就百度了一下，找到了一個(gè)jquery的實(shí)現(xiàn)這種效果的插件：jquery.lazyload，一個(gè)很不錯(cuò)的插件。
比如你打開(kāi)一個(gè)比較大或者長(zhǎng)的網(wǎng)頁(yè)，那么Lazy load能夠?qū)崿F(xiàn)先加載您所看到區(qū)域的圖片，等你滾動(dòng)到哪里，就加載那里的圖片。
如果你是圖片網(wǎng)站，而且一個(gè)頁(yè)面要加載很多圖片，這個(gè)插件是個(gè)很不錯(cuò)的選擇。
如何使用，引用如下js：
查看源代碼打印幫助

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

 
<script src="jquery.js" type="text/javascript"></script> 
<script src="jquery.lazyload.js" type="text/javascript"></script> 

在你的頁(yè)面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會(huì)使所有的圖片都延遲加載。插件還有幾個(gè)配置項(xiàng)可供設(shè)置。
當(dāng)然對(duì)于一些用戶來(lái)說(shuō)就上面的功能遠(yuǎn)遠(yuǎn)是不能達(dá)到要求的，下面我們看看是如何設(shè)置靈敏度的。我們可以設(shè)置閥值來(lái)控制這個(gè)功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設(shè)置成200 意思就是當(dāng)圖片沒(méi)有看到之前先load 200像素。當(dāng)然了你也可以通過(guò)設(shè)置占位符圖片和自定事件來(lái)觸發(fā)加載圖片事件
查看源代碼打印幫助

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

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

我們還可以通過(guò)定義effect 參數(shù)來(lái)定義一些圖片顯示效果
查看源代碼打印幫助

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

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

下載地址： source, minified or packed

您可能感興趣的文章:

相關(guān)文章

jQuery ready()和onload的加載耗時(shí)分析
這篇文章主要介紹了jQuery ready()和onload的加載耗時(shí),結(jié)合實(shí)例形式對(duì)比分析了jQuery中的ready()和JavaScript的window.onload進(jìn)行頁(yè)面加載的時(shí)間,需要的朋友可以參考下
2016-09-09
jQuery 入門級(jí)學(xué)習(xí)筆記及源碼
本周公司技術(shù)講座輪到我了，準(zhǔn)備說(shuō)說(shuō)現(xiàn)在流行的jQuery，下面是概要提綱，關(guān)鍵是看custom.js，已上傳源碼，程序中“//##”是分段用的，大家可以根據(jù)每一段取消注釋，然后找到相應(yīng)的id或class名查看效果。
2010-01-01
jQuery聯(lián)動(dòng)日歷的實(shí)例解析
本篇文章主要對(duì)jQuery聯(lián)動(dòng)日歷的實(shí)例進(jìn)行解析說(shuō)明。有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對(duì)大家有所幫助
2016-12-12
jQuery實(shí)現(xiàn)動(dòng)畫效果circle實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)畫效果circle的方法,涉及jquery鼠標(biāo)事件及頁(yè)面動(dòng)畫操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
在myeclipse中如何加入jquery代碼提示功能
這篇文章主要介紹了在myeclipse中如何加入jquery代碼提示功能,需要的朋友可以參考下
2014-06-06
jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測(cè)試可用】
這篇文章主要介紹了jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能,結(jié)合完整實(shí)例形式分析了jquery ui 實(shí)現(xiàn) tab標(biāo)簽切換功能的相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)高度和寬度
這篇文章主要介紹了javascript原生和jquery庫(kù)實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下
2014-07-07
Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果示例代碼
本篇文章主要是對(duì)Jquery EasyUI中彈出確認(rèn)對(duì)話框以及加載效果的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動(dòng)態(tài)顯示特效的使用技巧,需要的朋友可以參考下
2015-03-03
擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)
這篇文章主要介紹了擴(kuò)展jQuery對(duì)象時(shí)如何擴(kuò)展成員變量,需要的朋友可以參考下
2014-04-04