Magento加速利器——lazyload

转载 2011年01月14日 13:09:00

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图片。

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

相关文章推荐

Batch Normalization —— 加速深度神经网络收敛利器

Batch Normalization 提出自《Batch Normalization: Accelerating Deep Network Training by Reducing Internal...

magento lazyload解决方案

magneto框架速度确实慢,也是因为她的可扩展性高,不过还有一些途径来解决它,其中一个就是使用lazyload。 访问天猫的时候会发现她的图片加载是一段一段的,这就是所谓懒加载,原来我做了一个网...

搬瓦工VPS/OPENVZ加速利器FINALSPEED

搬瓦工VPS/OPENVZ加速利器FINALSPEED FinalSpeed是高速双边加速软件,可加速所有基于tcp协议的网络服务,在高丢包和高延迟环境下,仍可达到90%的物理带宽利用率,即使高峰时...
  • tjf_tjf
  • tjf_tjf
  • 2016年12月20日 10:18
  • 2910

linux内核源码阅读之facebook硬盘加速利器flashcache之一

从来没有写过源码阅读,这种感觉越来越强烈,虽然劣于文笔,但还是下定决心认真写一回。 源代码下载请参见上一篇flashcache之我见 http://blog.csdn.net/liumangxiong...

jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果

看到Louis Han的博客有个图片随滚动条渐显的效果,感觉既华丽又能节省资源,一举两得,于是就开始研究。通过查看其源代码以及google搜索知识,初步搞明白了,它是通过一个js来实现的,下面就来介绍...
  • lyd518
  • lyd518
  • 2011年07月07日 22:53
  • 864

计算方法——迭代过程加速

  • 2011年12月10日 10:34
  • 407B
  • 下载

安全卫士——手机加速

  • 2014年12月07日 12:43
  • 7KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Magento加速利器——lazyload
举报原因:
原因补充:

(最多只允许输入30个字)