好,首先让我们来看一下使用这个插件之后图片即时载入的效果图:
今天不经意间发现麦包包网有这
个功能,因为他的网站首页很长,而且首页上很多个图片,如果不使用这个插件,那么我们打开他的首页时肯定要等半天之后打开网站的进度条才会结束,这是因为
他的首页太多图片了,加载图片需要很久的时间,颇占网络频宽.他们使用了这个jquery插件就完美的解决了这个问题.
透过观察上边的效果图我们不难看出,随着我的滚动条在不断地往下滚动,页面上的图片在不断的载入进来.这样不但在视觉上感觉很酷,而且还不会额外的浪费我们的频宽,对于发明这种载入方式的人,我实在是佩服他.
透过对麦包包的研究,下边是我用jquery开发了一个插件用来实现该功能,在这个插件里滚动事件可以自己定义,例如点击鼠标经过等,另外如果你的版面很宽的时候横向滚动也ok,代码如下:
<script type='text/javascript'>
(function($){
$.fn.viewload=function(options){
var settings={
_before:0,//加載圖片時的提前量,0表示即時加載,如设置为200,表示滚动条在离目标位置还有200像素时就开始加载图片,可以做到不让用户察觉.
_moreimg:0,//該插件默认在找到第一张不在可见区的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没正常加载的情况,該參數意在加载N张可见区域外的图片,以避免出现这个问题
_event:"scroll",//事件触发时才加载,click(点击),mouseover(鼠标經過),scroll(滾動條滾動),這裡的值可以查閱jquery的事件
_show:"fadeIn",//使用何种效果载入,show(直接显示),fadeIn(淡入),slideDown(下拉),這裡的值可以查閱jquery的動畫效果
_object:window,//值为容器對象.該插件默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某容器的滚动条时依次加载其中的图片,例如:$("div #box")
_oimg:"img/blank.gif"//提前占位用的图片,值为某一图片路径.此图片用来占据将要加载的图片的位置,当图片加载时,该占位图则会隐藏
};
if(options){$.extend(settings,options);}
var elements=this;
if(settings._event=="scroll"){
$(settings._object).bind("scroll",function(event){
var counter=0;
elements.each(function(){
if(!$.s_y(this,settings) && !$.s_x(this,settings)){
$(this).trigger("appear");
}else{
if(counter++ > settings._moreimg){
return false;
}
}
});
var temp=$.grep(elements,function(element){
return !element.loaded;
});
elements=$(temp);
})
}
return this.each(function(){
var self=this;
$(self).attr("original",$(self).attr("src"));
if(settings._event!="scroll" || $.s_y(self,settings) || $.s_x(self,settings)){
if(settings._oimg){
$(self).attr("src",settings._oimg);
}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._show](settings.effectspeed);
self.loaded=true;
}).attr("src",$(self).attr("original"));
}
});
if(settings._event!="scroll"){
$(self).bind(settings._event,function(event){
if(!self.loaded){
$(self).trigger("appear");
}
})
}
})
};
$.s_y=function(element,settings){
if(settings._object===undefined || settings._object===window){
var fold=$(window).height() + $(window).scrollTop();
}else{
var fold=$(settings._object).offset().top + $(settings._object).height();
}
return fold<=$(element).offset().top - settings._before;
};
$.s_x=function(element,settings){
if(settings._object===undefined || settings._object===window){
var fold=$(window).width() + $(window).scrollLeft();
}else{
var fold=$(settings._object).offset().left + $(settings._object).width();
}
return fold<=$(element).offset().left - settings._before;
};
$.extend($.expr[':'],{
"below-the-fold":"$.s_y(a,{_before:0,_object:window})","above-the-fold":"!$.s_y(a,{_before:0,_object:window})",
"right-of-fold":"$.s_x(a,{_before:0,_object:window})","left-of-fold":"!$.s_x(a,{_before:0,_object:window})"
})
})(jQuery);
//调用方法欢迎转载本文,但请注明出处,Seven的部落格:http://hi.baidu.com/see7di/homeEmail:See7di@Gmail.com
$(function(){
$("img").viewload({
//下边所有的参数均可使用缺省值欢迎转载本文,但请注明出处,Seven的部落格:http://hi.baidu.com/see7di/homeEmail:See7di@Gmail.com
//_before:0,//加載圖片時的提前量,0表示即時加載,如设置为200,表示滚动条在离目标位置还有200像素时就开始加载图片,可以做到不让用户察觉.
//_moreimg:0,//該插件默认在找到第一张不在可见区的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没正常加载的情况,該參數意在加载N张可见区域外的图片,以避免出现这个问题
//_event:"scroll",//事件触发时才加载,click(点击),mouseover(鼠标經過),scroll(滾動條滾動),這裡的值可以查閱jquery的事件
//_show:"fadeIn",//使用何种效果载入,show(直接显示),fadeIn(淡入),slideDown(下拉),這裡的值可以查閱jquery的動畫效果
// _object:window,//值为容器對象.該插件默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某容器的滚动条时依次加载其中的图片,例如:$("div #box")
//_oimg:"img/blank.gif"//提前占位用的图片(一個长度和宽度均为1像素的图片),值为某一图片路径.此图片用来占据将要加载的图片的位置,当图片加载时,该占位图则会隐藏
});
});
</script>
下边是该插件压缩封装之后的代码,建议大家用这个,因为代码量更少,载入更快
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('(2($){$.J.K=2(e){5 f={6:-L,v:0,h:"i",w:"M",1:3,q:"x/N.O"};4(e){$.y(f,e)}5 g=7;4(f.h=="i"){$(f.1).r("i",2(b){5 c=0;g.z(2(){4(!$.j(7,f)&&!$.k(7,f)){$(7).A("s")}l{4(c++>f.v){m B}}});5 d=$.P(g,2(a){m!a.9});g=$(d)})}m 7.z(2(){5 b=7;$(b).8("t",$(b).8("n"));4(f.h!="i"||$.j(b,f)||$.k(b,f)){4(f.q){$(b).8("n",f.q)}l{$(b).Q("n")}b.9=B}l{b.9=C}$(b).R("s",2(){4(!7.9){$("<x />").r("S",2(){$(b).T().8("n",$(b).8("t"))[f.w](f.U);b.9=C}).8("n",$(b).8("t"))}});4(f.h!="i"){$(b).r(f.h,2(a){4(!b.9){$(b).A("s")}})}})};$.j=2(a,b){4(b.1===D||b.1===3){5 c=$(3).E()+$(3).V()}l{5 c=$(b.1).o().F+$(b.1).E()}m c<=$(a).o().F-b.6};$.k=2(a,b){4(b.1===D||b.1===3){5 c=$(3).G()+$(3).W()}l{5 c=$(b.1).o().u+$(b.1).G()}m c<=$(a).o().u-b.6};$.y($.X[\':\'],{"Y-H-p":"$.j(a,{6:0,1:3})","Z-H-p":"!$.j(a,{6:0,1:3})","10-I-p":"$.k(a,{6:0,1:3})","u-I-p":"!$.k(a,{6:0,1:3})"})})(11);',62,64,'|_object|function|window|if|var|_before|this|attr|loaded||||||||_event|scroll|s_y|s_x|else|return|src|offset|fold|_oimg|bind|appear|original|left|_moreimg|_show|img|extend|each|trigger|false|true|undefined|height|top|width|the|of|fn|viewload|170|fadeIn|blank|gif|grep|removeAttr|one|load|hide|effectspeed|scrollTop|scrollLeft|expr|below|above|right|jQuery'.split('|'),0,{}))
扩展阅读:
JQuery实现页面随滚动条滚动而动态加载内容的效果
http://hi.baidu.com/see7di/blog/item/e1a7a5000b8ed495e850cd4a.html