Magento加速利器——lazyload

Magento 的速度是令人头疼的问题，我现在介绍一种前端的加速方法。说到lazyload,相信很多人都不陌生，现在很多网站都已经用到这个技术，他可以延迟加载长页面的图片。对于Magento这样的商城网站的加速就很明显了。我今天说的这个lazyload是经过POPO 改造的（强逼我给他加外连……）。下面我放一些测试的数据，我正在做的一个网站的列表页。

很明显的就能看出差距。接下来写下用法：

首先加上jQuery,lazyload两段js。

lazyload：

view plain copy to clipboard print ?

( function ($){
$.fn.lazyload=function (options){
var settings={
threshold:0,
failurelimit:0,
event:"scroll" ,
effect:"show" ,
container:window
};
if (options){
$.extend(settings,options);
}
/*Fireonescrolleventperscroll.Notonescrolleventperimage.*/
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)){
/*Nothing.*/
}else if (!$.belowthefold( this ,settings)&&
!$.rightoffold(this ,settings)){
$(this ).trigger( "appear" );
}else {
if (counter++>settings.failurelimit){
return false ;
}
}
});
/*Removeimagefromarraysoitisnotloopednexttime.*/
var temp=$.grep(elements, function (element){
return !element.loaded;
});
elements=$(temp);
});
}
this .each( function (){
var self= this ;
/*Whenappearistriggeredloadoriginalimage.*/
$(self).one("appear" , function (){
if (! this .loaded){
$("<imgalt=" "/>" )
.bind("load" , function (){
$(self)
.hide()
.attr("src" ,$(self).attr( "original" ))
[settings.effect](settings.effectspeed);
self.loaded=true ;
})
.attr("src" ,$(self).attr( "original" ));
};
});
/*Whenwantedeventistriggeredloadoriginalimage*/
/*bytriggeringappear.*/
if ( "scroll" !=settings.event){
$(self).bind(settings.event,function (event){
if (!self.loaded){
$(self).trigger("appear" );
}
});
}
});
/*Forceinitialcheckifimagesshouldappear.*/
$(settings.container).trigger(settings.event);
return this ;
};
/*ConveniencemethodsinjQuerynamespace.*/
/*Useas$.belowthefold(element,{threshold:100,container:window})*/
$.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();
};
/*Customselectorsforyourconvenience.*/
/*Useas$("img:below-the-fold").something()*/
$.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})"
});
$(function (){
$("img[original]" ).lazyload({
threshold:200,effect:"fadeIn"
});
});
})(jQuery);