Magento加速利器——lazyload 

Magento 的速度是令人頭疼的問題，我現在介紹一種前端的加速方法。說到lazyload,相信很多人都不陌生，現在很多網站都已經用到這個技術，他可以延遲加載長頁面的圖檔。對于Magento這樣的商城網站的加速就很明顯了。我今天說的這個lazyload是經過POPO 改造的（強逼我給他加外連……）。下面我放一些測試的資料，我正在做的一個網站的清單頁。

很明顯的就能看出差距。接下來寫下用法：

首先加上jQuery,lazyload兩段js。

lazyload：

view plain copy to clipboard print ?

1. ( function ($) {  
2.     $.fn.lazyload = function (options) {  
3.         var  settings = {  
4.             threshold    : 0,  
5.             failurelimit : 0,  
6.             event        : "scroll" ,  
7.             effect       : "show" ,  
8.             container    : window  
9.         };  
10.         if (options) {  
11.             $.extend(settings, options);  
12.         }  
13.         var  elements =  this ;  
14.         if  ( "scroll"  == settings.event) {  
15.             $(settings.container).bind("scroll" ,  function (event) {  
16.                 var  counter = 0;  
17.                 elements.each(function () {  
18.                     if  ($.abovethetop( this , settings) ||  
19.                         $.leftofbegin(this , settings)) {  
20.                     } else   if  (!$.belowthefold( this , settings) &&  
21.                         !$.rightoffold(this , settings)) {  
22.                             $(this ).trigger( "appear" );  
23.                     } else  {  
24.                         if  (counter++ > settings.failurelimit) {  
25.                             return   false ;  
26.                         }  
27.                     }  
28.                 });  
29.                 var  temp = $.grep(elements,  function (element) {  
30.                     return  !element.loaded;  
31.                 });  
32.                 elements = $(temp);  
33.             });  
34.         }  
35.         this .each( function () {  
36.             var  self =  this ;  
37.             $(self).one("appear" ,  function () {  
38.                 if  (! this .loaded) {  
39.                     $("<img alt=" " />" )  
40.                         .bind("load" ,  function () {  
41.                             $(self)  
42.                                 .hide()  
43.                                 .attr("src" , $(self).attr( "original" ))  
44.                                 [settings.effect](settings.effectspeed);  
45.                             self.loaded = true ;  
46.                         })  
47.                         .attr("src" , $(self).attr( "original" ));  
48.                 };  
49.             });  
50.             if  ( "scroll"  != settings.event) {  
51.                 $(self).bind(settings.event, function (event) {  
52.                     if  (!self.loaded) {  
53.                         $(self).trigger("appear" );  
54.                     }  
55.                 });  
56.             }  
57.         });  
58.         $(settings.container).trigger(settings.event);  
59.         return   this ;  
60.     };  
61.     $.belowthefold = function (element, settings) {  
62.         if  (settings.container === undefined || settings.container === window) {  
63.             var  fold = $(window).height() + $(window).scrollTop();  
64.         } else  {  
65.             var  fold = $(settings.container).offset().top + $(settings.container).height();  
66.         }  
67.         return  fold <= $(element).offset().top - settings.threshold;  
68.     };  
69.     $.rightoffold = function (element, settings) {  
70.         if  (settings.container === undefined || settings.container === window) {  
71.             var  fold = $(window).width() + $(window).scrollLeft();  
72.         } else  {  
73.             var  fold = $(settings.container).offset().left + $(settings.container).width();  
74.         }  
75.         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();  
76.     };  
77.     $.leftofbegin = function (element, settings) {  
78.         if  (settings.container === undefined || settings.container === window) {  
79.             var  fold = $(window).scrollLeft();  
80.         } else  {  
81.             var  fold = $(settings.container).offset().left;  
82.         }  
83.         return  fold >= $(element).offset().left + settings.threshold + $(element).width();  
84.     };  
85.     $.extend($.expr[':' ], {  
86.         "below-the-fold"  :  "$.belowthefold(a, {threshold : 0, container: window})" ,  
87.         "above-the-fold"  :  "!$.belowthefold(a, {threshold : 0, container: window})" ,  
88.         "right-of-fold"   :  "$.rightoffold(a, {threshold : 0, container: window})" ,  
89.         "left-of-fold"    :  "!$.rightoffold(a, {threshold : 0, container: window})"   
90.     });  
91.     $(function (){  
92.   $("img[original]" ).lazyload({  
93.      threshold : 200,effect: "fadeIn"   
94.  });   
95. });  
96.  })(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