jquery 插件實(shí)現(xiàn)圖片延遲加載效果代碼
更新時間：2010年02月06日 13:57:51 作者：
前幾天上QQ的在線視頻網(wǎng)站，看到上面的影片列表頁的圖片有這樣一種效果：當(dāng)向下拉動滾動條時下面的圖片才開始加載，就是說它不會一下子把所有的圖片都加載出來，拉動滾動條后用戶看到了才會顯示，這是一個很不錯的用戶體驗(yàn)。
減少了頁面加載的時間了，也減輕了服務(wù)器的壓力，看了一下javascript源碼，里面寫的了lazyload，我就百度了一下，找到了一個jquery的實(shí)現(xiàn)這種效果的插件：jquery.lazyload，一個很不錯的插件。
比如你打開一個比較大或者長的網(wǎng)頁，那么Lazy load能夠?qū)崿F(xiàn)先加載您所看到區(qū)域的圖片，等你滾動到哪里，就加載那里的圖片。
如果你是圖片網(wǎng)站，而且一個頁面要加載很多圖片，這個插件是個很不錯的選擇。
如何使用，引用如下js：
查看源代碼打印幫助
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
在你的頁面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會使所有的圖片都延遲加載。插件還有幾個配置項(xiàng)可供設(shè)置。
當(dāng)然對于一些用戶來說就上面的功能遠(yuǎn)遠(yuǎn)是不能達(dá)到要求的，下面我們看看是如何設(shè)置靈敏度的。我們可以設(shè)置閥值來控制 這個功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設(shè)置成200 意思就是當(dāng)圖片沒有看到之前先load 200像素。當(dāng)然了你也可以通過設(shè)置占位符圖片和自定事件來觸發(fā)加載圖片事件
查看源代碼打印幫助
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
我們還可以通過定義effect 參數(shù)來定義一些圖片顯示效果
查看源代碼打印幫助
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
下載地址： source, minified or packed
比如你打開一個比較大或者長的網(wǎng)頁，那么Lazy load能夠?qū)崿F(xiàn)先加載您所看到區(qū)域的圖片，等你滾動到哪里，就加載那里的圖片。
如果你是圖片網(wǎng)站，而且一個頁面要加載很多圖片，這個插件是個很不錯的選擇。
如何使用，引用如下js：
查看源代碼打印幫助
復(fù)制代碼 代碼如下:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
在你的頁面中加入如下的javascript：
查看源代碼打印幫助1 $("img").lazyload();
這將會使所有的圖片都延遲加載。插件還有幾個配置項(xiàng)可供設(shè)置。
當(dāng)然對于一些用戶來說就上面的功能遠(yuǎn)遠(yuǎn)是不能達(dá)到要求的，下面我們看看是如何設(shè)置靈敏度的。我們可以設(shè)置閥值來控制 這個功能比較人性化吧。
$(“img”).lazyload({ threshold : 200 });
把閥值設(shè)置成200 意思就是當(dāng)圖片沒有看到之前先load 200像素。當(dāng)然了你也可以通過設(shè)置占位符圖片和自定事件來觸發(fā)加載圖片事件
查看源代碼打印幫助
復(fù)制代碼 代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
我們還可以通過定義effect 參數(shù)來定義一些圖片顯示效果
查看源代碼打印幫助
復(fù)制代碼 代碼如下:
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
下載地址： source, minified or packed
您可能感興趣的文章:
- jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
- Lazy Load 延遲加載圖片的 jQuery 插件
- 網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
- jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
- Jquery.LazyLoad.js修正版下載，實(shí)現(xiàn)圖片延遲加載插件
- jquery圖片延遲加載 前端開發(fā)技能必備系列
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jquery延遲加載外部js實(shí)現(xiàn)代碼
- jquery插件lazyload.js延遲加載圖片的使用方法
- Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
- 使用jquery實(shí)現(xiàn)的一個圖片延遲加載插件（含圖片延遲加載原理）
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實(shí)現(xiàn)鼠標(biāo)滾動圖片延遲加載效果附源碼下載
相關(guān)文章
這篇文章主要介紹了jQuery ready()和onload的加載耗時,結(jié)合實(shí)例形式對比分析了jQuery中的ready()和JavaScript的window.onload進(jìn)行頁面加載的時間,需要的朋友可以參考下2016-09-09
本周公司技術(shù)講座輪到我了，準(zhǔn)備說說現(xiàn)在流行的jQuery，下面是概要提綱，關(guān)鍵是看custom.js，已上傳源碼，程序中“//##”是分段用的，大家可以根據(jù)每一段取消注釋，然后找到相應(yīng)的id或class名查看效果。2010-01-01
本篇文章主要對jQuery聯(lián)動日歷的實(shí)例進(jìn)行解析說明。有興趣的朋友可以下載源碼調(diào)試運(yùn)行試試看，希望對大家有所幫助2016-12-12
jQuery實(shí)現(xiàn)動畫效果circle實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動畫效果circle的方法,涉及jquery鼠標(biāo)事件及頁面動畫操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了在myeclipse中如何加入jquery代碼提示功能,需要的朋友可以參考下2014-06-06
jquery ui 實(shí)現(xiàn) tab標(biāo)簽功能示例【測試可用】
這篇文章主要介紹了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庫實(shí)現(xiàn)iframe自適應(yīng)高度和寬度
這篇文章主要介紹了javascript原生和jquery庫實(shí)現(xiàn)iframe自適應(yīng)內(nèi)容高度和寬度,需要的朋友可以參考下2014-07-07
Jquery EasyUI中彈出確認(rèn)對話框以及加載效果示例代碼
本篇文章主要是對Jquery EasyUI中彈出確認(rèn)對話框以及加載效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動態(tài)顯示特效的使用技巧,需要的朋友可以參考下2015-03-03
擴(kuò)展jQuery對象時如何擴(kuò)展成員變量具體怎么實(shí)現(xiàn)
這篇文章主要介紹了擴(kuò)展jQuery對象時如何擴(kuò)展成員變量,需要的朋友可以參考下2014-04-04