jquery 圖片預加載，先模糊後清晰

怎樣使用?

Lazy Load 依賴於 jQuery. 請將下列代碼加入頁面 head 區域:

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

而且在你的執行代碼中加入下面語句:

$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

這將使 id="http://www.appelsiini.net/projects/lazyload/img" 區域下的圖片將被延遲加載.

設置敏感度

插件提供了 threshold 選項, 能夠經過設置臨界值 (觸發加載處到圖片的距離) 來控制圖片的加載. 默認值爲 0 (到達圖片邊界的時候加載).

$("http://www.appelsiini.net/projects/lazyload/img").lazyload({ threshold : 200 });

將臨界值定爲 200, 當可視區域離圖片還有 200 個象素的時候開始加載圖片. (這一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

佔位圖片

你還能夠設定一個佔位圖片並定義事件來觸發加載動做. 這時須要爲佔位圖片設定一個 URL 地址. 透明, 灰色和白色的 1x1 象素的圖片已經包含在插件裏面.

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

事件觸發加載

事件能夠是任何 jQuery 時間, 如: click 和 mouseover. 你還能夠使用自定義的事件, 如: sporty 和 foobar. 默認狀況下處於等待狀態, 直到用戶滾動到窗口上圖片所在位置. 在灰色佔位圖片被點擊以前阻止加載圖片, 你能夠這樣作:

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

使用特效

當圖片徹底加載的時候, 插件默認地使用 show() 方法來將圖顯示出來. 其實你能夠使用任何你想用的特效來處理. 下面的代碼使用 FadeIn 效果. 

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

圖片在容器裏面

你能夠將插件用在可滾動容器的圖片上, 例如帶滾動條的 DIV 元素. 你要作的只是將容器定義爲 jQuery 對象並做爲參數傳到初始化方法裏面. 

CSS 代碼:

#container {
	height: 600px;
	overflow: scroll;
}

JavaScript 代碼:

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

當圖片不順序排列

滾動頁面的時候, Lazy Load 會循環爲加載的圖片. 在循環中檢測圖片是否在可視區域內. 默認狀況下在找到第一張不在可見區域的圖片時中止循環. 圖片被認爲是流式分佈的, 圖片在頁面中的次序和 HTML 代碼中次序相同. 可是在一些佈局中, 這樣的假設是不成立的. 不過你能夠經過 failurelimit 選項來控制加載行爲.

$("img").lazyload({ 
	failurelimit : 10
});

將 failurelimit 設爲 10 令插件找到 10 個不在可見區域的圖片是才中止搜索. 若是你有一個猥瑣的佈局, 請把這個參數設高一點.

延遲加載圖片

Lazy Load 插件的一個不完整的功能, 可是這也能用來實現圖片的延遲加載. 下面的代碼實現了頁面加載完成後再加載. 頁面加載完成 5 秒後, 指定區域內的圖片會自動進行加載. 

$(function() {
	$("img:below-the-fold").lazyload({
		placeholder : "img/grey.gif", 
		event : "sporty" 
	});
});
$(window).bind("load", function() { 
	var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

壓縮代碼

(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"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)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(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);

打包的代碼

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(7($){$.Q.P=7(t){8 1={d:0,G:0,e:"o",B:"S",3:5};6(t){$.J(1,t)}8 p=c;6("o"==1.e){$(1.3).v("o",7(e){8 F=0;p.C(7(){6($.s(c,1)||$.x(c,1)){}f 6(!$.n(c,1)&&!$.m(c,1)){$(c).w("u")}f{6(F++>1.G){h E}}});8 H=$.N(p,7(9){h!9.k});p=$(H)})}c.C(7(){8 2=c;6(j==$(2).b("r")){$(2).b("r",$(2).b("i"))}6("o"!=1.e||j==$(2).b("i")||1.z==$(2).b("i")||($.s(2,1)||$.x(2,1)||$.n(2,1)||$.m(2,1))){6(1.z){$(2).b("i",1.z)}f{$(2).Z("i")}2.k=E}f{2.k=D}$(2).11("u",7(){6(!c.k){$("<Y />").v("U",7(){$(2).V().b("i",$(2).b("r"))[1.B](1.W);2.k=D}).b("i",$(2).b("r"))}});6("o"!=1.e){$(2).v(1.e,7(e){6(!2.k){$(2).w("u")}})}});$(1.3).w(1.e);h c};$.n=7(9,1){6(1.3===j||1.3===5){8 4=$(5).y()+$(5).I()}f{8 4=$(1.3).g().q+$(1.3).y()}h 4<=$(9).g().q-1.d};$.m=7(9,1){6(1.3===j||1.3===5){8 4=$(5).A()+$(5).M()}f{8 4=$(1.3).g().l+$(1.3).A()}h 4<=$(9).g().l-1.d};$.s=7(9,1){6(1.3===j||1.3===5){8 4=$(5).I()}f{8 4=$(1.3).g().q}h 4>=$(9).g().q+1.d+$(9).y()};$.x=7(9,1){6(1.3===j||1.3===5){8 4=$(5).M()}f{8 4=$(1.3).g().l}h 4>=$(9).g().l+1.d+$(9).A()};$.J($.10[\':\'],{"T-L-4":"$.n(a, {d : 0, 3: 5})","R-L-4":"!$.n(a, {d : 0, 3: 5})","O-K-4":"$.m(a, {d : 0, 3: 5})","l-K-4":"!$.m(a, {d : 0, 3: 5})"})})(X);',62,64,'|settings|self|container|fold|window|if|function|var|element||attr|this|threshold|event|else|offset|return|src|undefined|loaded|left|rightoffold|belowthefold|scroll|elements|top|original|abovethetop|options|appear|bind|trigger|leftofbegin|height|placeholder|width|effect|each|true|false|counter|failurelimit|temp|scrollTop|extend|of|the|scrollLeft|grep|right|lazyload|fn|above|show|below|load|hide|effectspeed|jQuery|img|removeAttr|expr|one'.split('|'),0,{}))

源代碼看這裏