Magento加速利器——lazyload

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

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

首先加上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();
    };
 
    $.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();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("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);

然后修改图片的路径

例如：<img alt=”"src=”<?php echo $this->getSkinUrl(‘images/co.jpg’) ?>”/>

修改为<img alt=”"original=”<?php echo $this->getSkinUrl(‘images/co.jpg’) ?>”src=”……”/>。

后面这个src里的图片是一个1像素的透明gif图片。

这样就可以了，有兴趣的可以尝试下。

原文链接地址：http://www.magentofront-end.com/magentomuban/232