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

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

举报

相关文章推荐

Magento加速利器——lazyload

方法

Magento加速利器——lazyload

Magento的速度是令人头疼的问题,我现在介绍一种前端的加速方法。说到lazyload,相信很多人都不陌生,现在很多网站都已经用到这个技术,他可以延迟加载长页面的图片。对于Magento这样的商城网...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

magento lazyload解决方案

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

Lazyload 懒加载

懒加载 基本定义 也称为延迟加载,当对象需要用到的时候再去加载。 用法 其实就是所谓的重写对象的get方法,当系统或者开发者调用对象的get方法时,再去加载对象。 需要注意:重写get方法时,...

懒加载jquery.lazyload.js

首先引入jquery文件和懒加载文件 懒加载lazyload $(function() { $("img.lazy").lazyload({ effect :...

lazyload图片延迟加载 适用所有类型

关于lazyload图片延迟加载简单介绍 LazyLoad大家再熟悉不 过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它...

magento提速!!!!

[Magento]给Magento提速的方法[复制链接]     1、安装Fooman Speedster插件 插件官方...

lazyload

!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c...

lazyload懒加载的使用

1.引用 2.对于要懒加载的图片进行如下属性设置。 其中src为未加载时的图片,dataimg为实际要加载的图片。 3.执行lazyload.init(); 4.分tab的懒加...

jQuery-懒加载技术(lazyload)

第一:lazyLoad简介及作用: 网站性能优化的插件,提高用户体验。 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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