網(wǎng)絡(luò)圖片延遲加載實現(xiàn)代碼 超越j(luò)query控件
更新時間:2010年03月27日 11:32:32 作者:
原理是分段加載圖片,主要用于大型網(wǎng)站節(jié)省帶寬,可是他們提供的東西壓縮混淆看不清,還有的要基于什么雅虎的什么庫,總之是很麻煩的,JQ的控件倒是夠清晰了,只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果
淘寶,QQ,還有當(dāng)當(dāng),亞馬遜之類網(wǎng)之類的都有這個效果,原理是分段加載圖片,主要用于大型網(wǎng)站節(jié)省帶寬,可是他們提供的東西壓縮混淆看不清,還有的要基于什么雅虎的什么庫,總之是很麻煩的,JQ的控件倒是夠清晰了,只是還是沒有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果,于是我在JQ懶加載控件上進(jìn)行一些改進(jìn),改進(jìn)以后的最大的特點就是調(diào)用方便,項目中不需要什么太多更改,而且JS文件也不大。(泡泡網(wǎng)工!轉(zhuǎn)載注明出處,謝謝)
1.給泡泡網(wǎng)開發(fā)控件,本來想直接用JQ的延遲控件,但是JQ的延遲控件只是加快了加載速度,沒有省帶寬,也就是說JQ的懶加載并沒有實際提升圖片的傳輸量,本人講不明白,還是請各位把代碼DOWN了以后驗收
{http://www.appelsiini.net/projects/lazyload 這個是原JQ控件的下載地址}
2.本控件用法要注意。
1.引用JQ:
<script src="js/jquery.js" type="text/javascript"></script>
JQ沒有就去網(wǎng)上DOWN
2.把下面貼的代碼保存為JS文件
<script src="js/MinmyLazyload.js" type="text/javascript"></script>
添加引用
3.調(diào)用語句,和JQ一摸一樣,也可以而這樣調(diào)用,記得是在頁面底部,</BODY>標(biāo)簽之前調(diào)用
<script type="text/javascript">$("img").lazyload(); </script>
或者這樣調(diào)用
<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" });
</script>
當(dāng)然你得先有一張blue-loading.gif的圖片,然后得在images文件夾下面才可以這樣調(diào)用,
effect后面設(shè)置顯示效果,默認(rèn)是SHOW的效果,
4.前臺的IMG標(biāo)簽里不要放SRC,請放入original標(biāo)簽。比如 ,
這樣就不會在頁面一打開的時候加載圖片了,也是最關(guān)鍵的地方,或者說是項目的后臺代碼里面唯一需要改動的地方。
有代碼有真相
代碼
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",//默認(rèn)效果為show
container: window
};
if (options) {
$.extend(settings, options);
}
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)
) {
self.loaded = false;
}
else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
self.loaded = false;
$(this).trigger("appear");
}
else {
self.loaded = true;
if (counter++ > settings.failurelimit) {
return false;
}
}
});
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
/**三超控件--作品**/
this.each(function() {
var self = this;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
$(settings.container).trigger(settings.event);
return this;
};
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
/**
貌似很難讓人理解我在哪里優(yōu)化了
先寫清楚JQ地懶加載原理:
假設(shè)有10000張圖片要在頁面上顯示,JQ的先一次性傳送1W張圖片到客戶端,然后頁面快速加載10張,
省下來了9990張圖片的加載時間
我的控件原理:
先一次性傳送10張圖片到客戶端,加載10張,
省下來了9990張圖片的加載時間,
以及9990張圖片的傳送時間,這時候節(jié)省的網(wǎng)絡(luò)流量是巨大的,
對大型網(wǎng)站來說,這些節(jié)省出的帶寬可以干的事情就海了去了
也就是說我的控件第一次只是加載了1W個值為空的IMG標(biāo)簽,也就是一點點的字符串而已!
(IMG 標(biāo)簽里面的original屬性不經(jīng)過處理是不可能將服務(wù)器的圖片下載到客戶端上面去的!
但是如果用SRC標(biāo)簽圖片絕對第一次就全部加載過去了,這個時候也就只能在頁面加載速度上下功夫了)
不相信的可以用火狐瀏覽器查看圖片請求,JQ控件絕對是一次傳送完畢!)
順便說一下我的測試JQ的方法
http://www.appelsiini.net/projects/lazyload/enabled.html 這個是JQ控件的測試地址,用火狐打開,打開firebug,然后監(jiān)視圖片的傳輸量,情況是一打開就把6張圖片全部加載完畢,再拖動滾動條的時候,只是簡單的執(zhí)行加載功能,還是上圖:

出處http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html
1.給泡泡網(wǎng)開發(fā)控件,本來想直接用JQ的延遲控件,但是JQ的延遲控件只是加快了加載速度,沒有省帶寬,也就是說JQ的懶加載并沒有實際提升圖片的傳輸量,本人講不明白,還是請各位把代碼DOWN了以后驗收
{http://www.appelsiini.net/projects/lazyload 這個是原JQ控件的下載地址}
2.本控件用法要注意。
1.引用JQ:
復(fù)制代碼 代碼如下:
<script src="js/jquery.js" type="text/javascript"></script>
JQ沒有就去網(wǎng)上DOWN
2.把下面貼的代碼保存為JS文件
復(fù)制代碼 代碼如下:
<script src="js/MinmyLazyload.js" type="text/javascript"></script>
添加引用
3.調(diào)用語句,和JQ一摸一樣,也可以而這樣調(diào)用,記得是在頁面底部,</BODY>標(biāo)簽之前調(diào)用
復(fù)制代碼 代碼如下:
<script type="text/javascript">$("img").lazyload(); </script>
或者這樣調(diào)用
復(fù)制代碼 代碼如下:
<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" });
</script>
當(dāng)然你得先有一張blue-loading.gif的圖片,然后得在images文件夾下面才可以這樣調(diào)用,
effect后面設(shè)置顯示效果,默認(rèn)是SHOW的效果,
4.前臺的IMG標(biāo)簽里不要放SRC,請放入original標(biāo)簽。比如 ,
這樣就不會在頁面一打開的時候加載圖片了,也是最關(guān)鍵的地方,或者說是項目的后臺代碼里面唯一需要改動的地方。
有代碼有真相
代碼
復(fù)制代碼 代碼如下:
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",//默認(rèn)效果為show
container: window
};
if (options) {
$.extend(settings, options);
}
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)
) {
self.loaded = false;
}
else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
self.loaded = false;
$(this).trigger("appear");
}
else {
self.loaded = true;
if (counter++ > settings.failurelimit) {
return false;
}
}
});
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
/**三超控件--作品**/
this.each(function() {
var self = this;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
$(settings.container).trigger(settings.event);
return this;
};
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
/**
貌似很難讓人理解我在哪里優(yōu)化了
先寫清楚JQ地懶加載原理:
假設(shè)有10000張圖片要在頁面上顯示,JQ的先一次性傳送1W張圖片到客戶端,然后頁面快速加載10張,
省下來了9990張圖片的加載時間
我的控件原理:
先一次性傳送10張圖片到客戶端,加載10張,
省下來了9990張圖片的加載時間,
以及9990張圖片的傳送時間,這時候節(jié)省的網(wǎng)絡(luò)流量是巨大的,
對大型網(wǎng)站來說,這些節(jié)省出的帶寬可以干的事情就海了去了
也就是說我的控件第一次只是加載了1W個值為空的IMG標(biāo)簽,也就是一點點的字符串而已!
(IMG 標(biāo)簽里面的original屬性不經(jīng)過處理是不可能將服務(wù)器的圖片下載到客戶端上面去的!
但是如果用SRC標(biāo)簽圖片絕對第一次就全部加載過去了,這個時候也就只能在頁面加載速度上下功夫了)
不相信的可以用火狐瀏覽器查看圖片請求,JQ控件絕對是一次傳送完畢!)
順便說一下我的測試JQ的方法
http://www.appelsiini.net/projects/lazyload/enabled.html 這個是JQ控件的測試地址,用火狐打開,打開firebug,然后監(jiān)視圖片的傳輸量,情況是一打開就把6張圖片全部加載完畢,再拖動滾動條的時候,只是簡單的執(zhí)行加載功能,還是上圖:

出處http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html
您可能感興趣的文章:
- jquery.lazyload 實現(xiàn)圖片延遲加載jquery插件
- Lazy Load 延遲加載圖片的 jQuery 插件
- jquery 插件實現(xiàn)圖片延遲加載效果代碼
- jquery lazyload延遲加載技術(shù)的實現(xiàn)原理分析
- Jquery.LazyLoad.js修正版下載,實現(xiàn)圖片延遲加載插件
- jquery圖片延遲加載 前端開發(fā)技能必備系列
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jquery延遲加載外部js實現(xiàn)代碼
- jquery插件lazyload.js延遲加載圖片的使用方法
- Jquery圖片延遲加載插件jquery.lazyload.js的使用方法
- 使用jquery實現(xiàn)的一個圖片延遲加載插件(含圖片延遲加載原理)
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實現(xiàn)鼠標(biāo)滾動圖片延遲加載效果附源碼下載
相關(guān)文章
如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢,下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下2022-09-09利用js給datalist或select動態(tài)添加option選項的方法
下面小編就為大家分享一篇利用js給datalist或select動態(tài)添加option選項的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01鼠標(biāo)拖動改變DIV等網(wǎng)頁元素的大小的實現(xiàn)方法
下面小編就為大家?guī)硪黄髽?biāo)拖動改變DIV等網(wǎng)頁元素的大小的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07javascript+html5+css3自定義彈出窗口效果
這篇文章主要為大家詳細(xì)介紹了javascript+html5+css3自定義彈出窗口效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10JavaScript canvas實現(xiàn)七彩時鐘效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)七彩時鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)
在實際需要中可能需要規(guī)定在指定的時間之后再去執(zhí)行一個函數(shù)以達(dá)成期望的目的,這也就是一個定時器效果,本文給大家介紹基于JavaScript實現(xiàn)一定時間后去執(zhí)行一個函數(shù)的相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2015-12-12javascript實現(xiàn)表格排序 編輯 拖拽 縮放
這篇文章主要介紹了javascript實現(xiàn)表格排序 編輯 拖拽 縮放的方法,效果非常不錯,只是兼容性還有些問題,有待優(yōu)化。2015-01-01