Magento加速利器——lazyload

Magento加速利器——lazyload

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

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

首先加上jQuery,lazyload两段js。

lazyload：

view plain copy to clipboard print ?

1. ( function ($){
3. $.fn.lazyload=function (options){
4. var settings={
5. threshold:0,
6. failurelimit:0,
7. event:"scroll" ,
8. effect:"show" ,
9. container:window
10. };
12. if (options){
13. $.extend(settings,options);
14. }
16. /*Fireonescrolleventperscroll.Notonescrolleventperimage.*/
17. var elements= this ;
18. if ( "scroll" ==settings.event){
19. $(settings.container).bind("scroll" , function (event){
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. /*Removeimagefromarraysoitisnotloopednexttime.*/
36. var temp=$.grep(elements, function (element){
37. return !element.loaded;
38. });
39. elements=$(temp);
40. });
41. }
43. this .each( function (){
44. var self= this ;
46. /*Whenappearistriggeredloadoriginalimage.*/
47. $(self).one("appear" , function (){
48. if (! this .loaded){
49. $("<imgalt=" "/>" )
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. });
61. /*Whenwantedeventistriggeredloadoriginalimage*/
62. /*bytriggeringappear.*/
63. if ( "scroll" !=settings.event){
64. $(self).bind(settings.event,function (event){
65. if (!self.loaded){
66. $(self).trigger("appear" );
67. }
68. });
69. }
70. });
72. /*Forceinitialcheckifimagesshouldappear.*/
73. $(settings.container).trigger(settings.event);
75. return this ;
77. };
79. /*ConveniencemethodsinjQuerynamespace.*/
80. /*Useas$.belowthefold(element,{threshold:100,container:window})*/
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. };
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. };
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. /*Customselectorsforyourconvenience.*/
109. /*Useas$("img:below-the-fold").something()*/
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. });
122. });
123. })(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