Magento加速利器——lazyload

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);

(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