jq图片延迟加载.docx

jq图片延迟加载1.引用JQ：JQ没有就去网上DOWN2.把下面贴的代码保存为JS文件添加引用 3.调用语句，和JQ一摸一样，也可以而这样调用,记得是在页面底部，标签之前调用$(img).lazyload();或者这样调用$(img).lazyload(placeholder:images/blue-loading.gif,effect:fadeIn);当然你得先有一张blue-loading.gif的图片，然后得在images文件夹下面才可以这样调用，effect设置显示效果，默认是SHOW的效果，4.前台的IMG标签里不要放SRC，请放入original标签。比如，这样就不会在页面一打开的时候加载图片了，也是最关键的地方，或者说是项目的后台代码里面唯一需要改动的地方。好，下面是代码放送,请注明出处/jacd/archive/2010/03/25/1696085.html，于2010年3月26日发表于博客园的泡泡网控件有代码有真相代码(function($)$.fn.lazyload=function(options)varsettings=threshold:0,failurelimit:0,event:scroll,effect:show,/默认效果为showcontainer:window;if(options)$.extend(settings,options);varelements=this;if(scroll=settings.event)$(settings.container).bind(scroll,function(event)varcounter=0;elements.each(function()if($.abovethetop(this,settings)|$.leftofbegin(this,settings)self.loaded=false;elseif(!$.belowthefold(this,settings)&!$.rightoffold(this,settings)self.loaded=false;$(this).trigger(appear);elseself.loaded=true;if(counter+settings.failurelimit)returnfalse;);vartemp=$.grep(elements,function(element)return!element.loaded;);elements=$(temp););this.each(function()varself=this;if(settings.placeholder)$(self).attr(src,settings.placeholder);$(self).one(appear,function()if(!this.loaded)$().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);returnthis;$.belowthefold=function(element,settings)if(settings.container=undefined|settings.container=window)varfold=$(window).height()+$(window).scrollTop();elsevarfold=$(settings.container).offset().top+$(settings.container).height();returnfold=$(element).offset().top-settings.threshold;$.rightoffold=function(element,settings)if(settings.container=undefined|settings.container=window)varfold=$(window).width()+$(window).scrollLeft();elsevarfold=$(settings.container).offset().left+$(settings.container).width();returnfold=$(element).offset().top+settings.threshold+$(element).height();$.leftofbegin=function(element,settings)if(settings.container=undefined|settings.container=window)varfold=$(window).scrollLeft();elsevarfold=$(settings.container).offset().left;returnfold=$(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