Magento加速利器——lazyload

阅读量：4200 次

发布时间：2019-05-26

本文共 7372 字，大约阅读时间需要 24 分钟。

Magento加速利器——lazyload

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

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

首先加上jQuery,lazyload两段js。

lazyload：

( function ($) {

$.fn.lazyload = function (options) {

var settings = {

threshold : 0,

failurelimit : 0,

event : "scroll" ,

effect : "show" ,

container : window

};

if (options) {

$.extend(settings, options);

}

/* Fire one scroll event per scroll. Not one scroll event per image. */

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 ;

}

}

});

/* Remove image from array so it is not looped next time. */

var temp = $.grep(elements, function (element) {

return !element.loaded;

});

elements = $(temp);

});

}

this .each( function () {

var self = this ;

/* When appear is triggered load original image. */

$(self).one("appear" , function () {

if (! this .loaded) {

$("<img alt=" " />" )

.bind("load" , function () {

$(self)

.hide()

.attr("src" , $(self).attr( "original" ))

[settings.effect](settings.effectspeed);

self.loaded = true ;

})

.attr("src" , $(self).attr( "original" ));

};

});

/* When wanted event is triggered load original image */

/* by triggering appear. */

if ( "scroll" != settings.event) {

$(self).bind(settings.event, function (event) {

if (!self.loaded) {

$(self).trigger("appear" );

}

});

}

});

/* Force initial check if images should appear. */

$(settings.container).trigger(settings.event);

return this ;

};

/* Convenience methods in jQuery namespace. */

/* Use as $.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();