jq圖片延遲加載.docx

jq圖片延遲加載1.引用JQ：JQ沒有就去網(wǎng)上DOWN2.把下面貼的代碼保存為JS文件添加引用 3.調(diào)用語句，和JQ一摸一樣，也可以而這樣調(diào)用,記得是在頁面底部，標(biāo)簽之前調(diào)用$(img).lazyload();或者這樣調(diào)用$(img).lazyload(placeholder:images/blue-loading.gif,effect:fadeIn);當(dāng)然你得先有一張blue-loading.gif的圖片，然后得在images文件夾下面才可以這樣調(diào)用，effect設(shè)置顯示效果，默認(rèn)是SHOW的效果，4.前臺(tái)的IMG標(biāo)簽里不要放SRC，請(qǐng)放入original標(biāo)簽。比如，這樣就不會(huì)在頁面一打開的時(shí)候加載圖片了，也是最關(guān)鍵的地方，或者說是項(xiàng)目的后臺(tái)代碼里面唯一需要改動(dòng)的地方。好，下面是代碼放送,請(qǐng)注明出處/jacd/archive/2010/03/25/1696085.html，于2010年3月26日發(fā)表于博客園的泡泡網(wǎng)控件有代碼有真相代碼(function($)$.fn.lazyload=function(options)varsettings=threshold:0,failurelimit:0,event:scroll,effect:show,/默認(rèn)效果為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