快捷導(dǎo)航

網(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：

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

JQ沒有就去網(wǎng)上DOWN
2.把下面貼的代碼保存為JS文件

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

添加引用
3.調(diào)用語句，和JQ一摸一樣，也可以而這樣調(diào)用,記得是在頁面底部，</BODY>標(biāo)簽之前調(diào)用　　

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

　　或者這樣調(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í)行加載功能，還是上圖：