Magento acceleration tool-lazyload

Magento acceleration tool-lazyload

Magento

Speed is a headache. I am introducing a front-end acceleration method. Speaking of lazyload, I believe many people are familiar with it. Now many websites have used this technology, and he can delay loading pictures of long pages. The acceleration of magento is obvious. The lazyload I am talking about today goes through Popo
Transformed (forced me to add external connections to him ......). Below I put some test data, a list page of a website I am working on.

Obviously, we can see the gap. Next, write down the usage:

First, add jquery and lazyload.

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. /* 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 ){
    
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. }
43. This
    . Each (
    Function
    (){
    
44. VaR
    Self =
    This
    ;
    
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. });
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. });
72. /* Force initial check if images shoshould appear .*/
    
    
73. $ (Settings. Container). Trigger (settings. Event );
75. Return
     
    This
    ;
    
77. };
79. /* Convenience methods in jquery namespace .*/
    
    
80. /* Use as $. 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. /* Custom selectors for your convenience .*/
     
     
109. /* Use as $ ("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 ($) <br/> {$. FN. lazyload = function (options) {var settings = {threshold: 0, <br/> failurelimit: 0, event: "scroll", effect: "show", container: window <br/>}; if (options) {$. extend (settings, options);}/* fire one scroll <br/> event per scroll. not one scroll event per image. */var elements = <br/> This; If ("scroll" = settings. event) {<br/> $ (settings. container ). BIND ("scroll", func Tion (event) {var counter = 0; <br/> elements. each (function () {if ($. abovethetop (this, settings) | <br/> $. leftofbegin (this, settings) {/* nothing. */} else if <br/> (! $. Belowthefold (this, settings )&&! $. Rightoffold (this, <br/> Settings) {$ (this ). trigger ("appear");} else {If (counter ++> <br/> Settings. failurelimit) {return false ;}});/* remove image from <br/> array so it is not looped next time. */var temp = $. grep (elements, <br/> function (element) {return! Element. loaded ;}); elements =$ (temp) ;}); <br/>} this. each (function () {var self = This;/* When appear is triggered <br/> load original image. */$ (Self ). one ("appear", function () {If <br/> (! This. loaded) {$ (" "). BIND ("LOAD", function () {<br/> $ (Self ). hide (). ATTR ("src", $ (Self ). ATTR ("original") <br/> [settings. effect] (settings. effectspeed); self. loaded = true ;}) <br/>. ATTR ("src", $ (Self ). ATTR ("original") ;};});/* When wanted event is <br/> triggered load original image * // * by triggering appear. */If <br/> ("scroll "! = Settings. Event) {$ (Self). BIND (settings. event, <br/> function (event) {If (! Self. loaded) {$ (Self ). trigger ("appear") ;}}); <br/>});/* force initial check if images shoshould appear. */<br/> $ (settings. container ). trigger (settings. event); return this ;};/* <br/> convenience methods in jquery namespace. * // * use as <br/> $. belowthefold (element, {threshold: 100, container: Window}) */<br/> $. belowthefold = function (element, settings) {If (settings. container <br/> === undefi Ned | settings. container === window) {var fold = <br/> $ (window ). height () + $ (window ). scrolltop ();} else {var fold = <br/> $ (settings. container ). offset (). top + $ (settings. container ). height () ;}< br/> return fold <= $ (element ). offset (). top-settings. threshold ;}; <br/> $. rightoffold = function (element, settings) {If (settings. container <br/>== undefined | settings. container === window) {var fo LD = <br/> $ (window ). width () + $ (window ). scrollleft ();} else {var fold = <br/> $ (settings. container ). offset (). left + $ (settings. container ). width () ;}< br/> return fold <= $ (element ). offset (). left-settings. threshold ;}; <br/> $. abovethetop = function (element, settings) {If (settings. container <br/>== undefined | settings. container === window) {var fold = <br/> $ (window ). scrolltop ();} else {VaR Fold = <br/> $ (settings. container ). offset (). top;} return fold >=< br/> $ (element ). offset (). top + settings. threshold + $ (element ). height () ;}; <br/> $. leftofbegin = function (element, settings) {If (settings. container <br/>== undefined | settings. container === window) {var fold = <br/> $ (window ). scrollleft ();} else {var fold = <br/> $ (settings. container ). offset (). left;} return fold >=< br/> $ (Ele Ment ). offset (). left + settings. threshold + $ (element ). width () ;}; <br/>/* Custom selectors for your convenience. * // * use as <br/> $ ("IMG: below-the-fold "). something () */$. extend ($. expr [':'], {<br/> "below-the-fold": "$. belowthefold (A, {threshold: 0, container: <br/> window}) "," above-the-fold ":"! $. Belowthefold (A, {threshold: 0, <br/> container: Window}) "," right-of-fold ":" $. rightoffold (A, {threshold: <br/> 0, container: Window}) "," left-of-fold ":"! $. Rightoffold (A, {threshold <br/>: 0, container: Window}) "}); $ (function () {<br/> $ ("IMG [original]"). lazyload ({threshold: 200, effect: "fadein"}) ;}); <br/>}) (jquery );
 

 

Then modify the image path.

Example: = "<? PHP echo $ this-> getskinurl ('images/co.jpg ')?>" />

Change to = "<? PHP echo $ this-> getskinurl ('images/co.jpg ')?>" Src = "......"
/>.

The image in the SRC below is a 1 pixel transparent GIF image.

In this way, you can try it if you are interested.

Original article link: http://www.magentofront-end.com/magentomuban/232