Terry - 专注外贸B2C

GitHub地址:https://github.com/fancyecommerce

Magento加速利器——lazyload

Magento加速利器——lazyload 

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

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

首先加上jQuery,lazyload两段js。

lazyload:

  1. ( function ($) {  
  2.    
  3.     $.fn.lazyload = function (options) {  
  4.         var  settings = {  
  5.             threshold    : 0,  
  6.             failurelimit : 0,  
  7.             event        : "scroll" ,  
  8.             effect       : "show" ,  
  9.             container    : window  
  10.         };  
  11.    
  12.         if (options) {  
  13.             $.extend(settings, options);  
  14.         }  
  15.    
  16.         /* Fire one scroll event per scroll. Not one scroll event per image. */   
  17.         var  elements =  this ;  
  18.         if  ( "scroll"  == settings.event) {  
  19.             $(settings.container).bind("scroll" function (event) {  
  20.    
  21.                 var  counter = 0;  
  22.                 elements.each(function () {  
  23.                     if  ($.abovethetop( this , settings) ||  
  24.                         $.leftofbegin(this , settings)) {  
  25.                             /* Nothing. */   
  26.                     } else   if  (!$.belowthefold( this , settings) &&  
  27.                         !$.rightoffold(this , settings)) {  
  28.                             $(this ).trigger( "appear" );  
  29.                     } else  {  
  30.                         if  (counter++ > settings.failurelimit) {  
  31.                             return   false ;  
  32.                         }  
  33.                     }  
  34.                 });  
  35.                 /* Remove image from array so it is not looped next time. */   
  36.                 var  temp = $.grep(elements,  function (element) {  
  37.                     return  !element.loaded;  
  38.                 });  
  39.                 elements = $(temp);  
  40.             });  
  41.         }  
  42.    
  43.         this .each( function () {  
  44.             var  self =  this ;  
  45.    
  46.             /* When appear is triggered load original image. */   
  47.             $(self).one("appear" function () {  
  48.                 if  (! this .loaded) {  
  49.                     $("<img alt=" " />" )  
  50.                         .bind("load" function () {  
  51.                             $(self)  
  52.                                 .hide()  
  53.                                 .attr("src" , $(self).attr( "original" ))  
  54.                                 [settings.effect](settings.effectspeed);  
  55.                             self.loaded = true ;  
  56.                         })  
  57.                         .attr("src" , $(self).attr( "original" ));  
  58.                 };  
  59.             });  
  60.    
  61.             /* When wanted event is triggered load original image */   
  62.             /* by triggering appear.                              */   
  63.             if  ( "scroll"  != settings.event) {  
  64.                 $(self).bind(settings.event, function (event) {  
  65.                     if  (!self.loaded) {  
  66.                         $(self).trigger("appear" );  
  67.                     }  
  68.                 });  
  69.             }  
  70.         });  
  71.    
  72.         /* Force initial check if images should appear. */   
  73.         $(settings.container).trigger(settings.event);  
  74.    
  75.         return   this ;  
  76.    
  77.     };  
  78.    
  79.     /* Convenience methods in jQuery namespace.           */   
  80.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */   
  81.    
  82.     $.belowthefold = function (element, settings) {  
  83.         if  (settings.container === undefined || settings.container === window) {  
  84.             var  fold = $(window).height() + $(window).scrollTop();  
  85.         } else  {  
  86.             var  fold = $(settings.container).offset().top + $(settings.container).height();  
  87.         }  
  88.         return  fold <= $(element).offset().top - settings.threshold;  
  89.     };  
  90.    
  91.     $.rightoffold = function (element, settings) {  
  92.         if  (settings.container === undefined || settings.container === window) {  
  93.             var  fold = $(window).width() + $(window).scrollLeft();  
  94.         } else  {  
  95.             var  fold = $(settings.container).offset().left + $(settings.container).width();  
  96.         }  
  97.         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();  
  98.     };  
  99.    
  100.     $.leftofbegin = function (element, settings) {  
  101.         if  (settings.container === undefined || settings.container === window) {  
  102.             var  fold = $(window).scrollLeft();  
  103.         } else  {  
  104.             var  fold = $(settings.container).offset().left;  
  105.         }  
  106.         return  fold >= $(element).offset().left + settings.threshold + $(element).width();  
  107.     };  
  108.     /* Custom selectors for your convenience.   */   
  109.     /* Use as $("img:below-the-fold").something() */   
  110.    
  111.     $.extend($.expr[':' ], {  
  112.         "below-the-fold"  :  "$.belowthefold(a, {threshold : 0, container: window})" ,  
  113.         "above-the-fold"  :  "!$.belowthefold(a, {threshold : 0, container: window})" ,  
  114.         "right-of-fold"   :  "$.rightoffold(a, {threshold : 0, container: window})" ,  
  115.         "left-of-fold"    :  "!$.rightoffold(a, {threshold : 0, container: window})"   
  116.     });  
  117.     $(function (){  
  118.   $("img[original]" ).lazyload({  
  119.      threshold : 200,effect: "fadeIn"   
  120.  });   
  121.    
  122. });  
  123.  })(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图片。

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

阅读更多
相关热词: magento
上一篇10个必装Magento免费插件
下一篇magento -- 客户无法使用contact us 发邮件
想对作者说点什么? 我来说一句

magento 企业版全页缓存

2012年10月18日 27KB 下载

magento lazyload插件

2012年07月13日 99KB 下载

没有更多推荐了,返回首页

关闭
关闭