Merge pull request #11 from magefan/amasty-pagespeedoptimizer-integration

integration with amasty lazy load

Author: magefan

Plugin/Amasty/PageSpeedOptimizer/Model/Output/LazyLoadProcessorPlugin.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Copyright © 2017 Ihor Vansach ([email protected]). All rights reserved.
+ * See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
+ *
+ * Glory to Ukraine! Glory to the heroes!
+ */
+
+namespace Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output;
+
+/**
+ * Class LazyLoadProcessorPlugin
+ * @package Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output
+ */
+class LazyLoadProcessorPlugin
+{
+    /**
+     * @param $subject
+     * @param callable $proceed
+     * @param $image
+     * @param $imagePath
+     * @return mixed|null|string|string[]
+     */
+    public function aroundReplaceWithPictureTag($subject, callable $proceed, $image, $imagePath)
+    {
+        $originImagePath = $imagePath;
+        if (strpos($imagePath, 'pixel.jpg')) {
+
+            $doStr = 'data-original="';
+            $p1 = strpos($image, $doStr);
+            if ($p1 !== false) {
+                $p1 += strlen($doStr);
+                $p2 = strpos($image, '"', $p1);
+                if ($p2 !== false) {
+                    $imagePath = substr($image, $p1, $p2 - $p1);
+                }
+            }
+        }
+
+        $html = $proceed($image, $imagePath);
+
+        if ($originImagePath != $imagePath) {
+            if (strpos($html, '<picture') !== false) {
+                $tmpSrc = 'TMP_SRC';
+                $pixelSrc = 'srcset="' . $originImagePath . '"';
+
+                $html = str_replace($pixelSrc, $tmpSrc, $html);
+
+                $html = preg_replace('#<source\s+([^>]*)(?:srcset="([^"]*)")([^>]*)?>#isU', '<source ' . $pixelSrc .
+                    ' data-originalset="$2" $1 $3/>', $html);
+
+                $html = str_replace($tmpSrc, $pixelSrc, $html);
+            }
+        }
+
+        return $html;
+
+    }
+}

etc/frontend/di.xml

@@ -16,4 +16,9 @@
         <plugin name="magefan_lazyload_lock"
                 type="Magefan\LazyLoad\Plugin\BlockPlugin" sortOrder="1000"/>
     </type>
+    <!-- Integration with Amasty_PageSpeedOptimizer -->
+    <type name="Amasty\PageSpeedOptimizer\Model\Output\LazyLoadProcessor">
+        <plugin name="magefan_lazyLoad_plugin_amasty_pagespeedoptimizer_model_output_lazyloadprocessor_plugin"
+                type="Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output\LazyLoadProcessorPlugin" sortOrder="1000"/>
+    </type>
 </config>

view/frontend/templates/lazy.phtml

@@ -8,24 +8,24 @@
 ?>
 
 <script data-rocketjavascript="false">
-(function(){
-    var jsSrc = '<?php echo $this->getViewFileUrl('Magefan_LazyLoad::js/lazyload.min.js'); ?>'
-    function loadScript(e,t){var a,n,r;n=!1,(a=document.createElement("script")).type="text/javascript",a.src=e,a.onload=a.onreadystatechange=function(){n||this.readyState&&"complete"!=this.readyState||(n=!0,t())},(r=document.getElementsByTagName("script")[0]).parentNode.insertBefore(a,r)}
-    loadScript(jsSrc, function(){
-        var lazyLoadConfig = {
-            'elements_selector' : 'img,div',
-            'data_srcset' : 'originalset'
-        };
-        if (document.readyState !== 'loading') {
-            var myLazyLoad = new LazyLoad(lazyLoadConfig);
-        } else {
-            document.addEventListener("DOMContentLoaded", function() {
-                var myLazyLoad = new LazyLoad(lazyLoadConfig);        
-            });
-        }
-        return true;
-    });
-})();
+    (function(){
+        var jsSrc = '<?php echo $this->getViewFileUrl('Magefan_LazyLoad::js/lazyload.min.js'); ?>'
+        function loadScript(e,t){var a,n,r;n=!1,(a=document.createElement("script")).type="text/javascript",a.src=e,a.onload=a.onreadystatechange=function(){n||this.readyState&&"complete"!=this.readyState||(n=!0,t())},(r=document.getElementsByTagName("script")[0]).parentNode.insertBefore(a,r)}
+        loadScript(jsSrc, function(){
+            var lazyLoadConfig = {
+                'elements_selector' : 'img,div',
+                'data_srcset' : 'originalset'
+            };
+            if (document.readyState !== 'loading') {
+                var myLazyLoad = new LazyLoad(lazyLoadConfig);
+            } else {
+                document.addEventListener("DOMContentLoaded", function() {
+                    var myLazyLoad = new LazyLoad(lazyLoadConfig);
+                });
+            }
+            return true;
+        });
+    })();
 </script>
 <script>
     require(['jquery', 'domReady!'], function($){
@@ -42,12 +42,10 @@
                 }
             });
         });
-
         /* Fix for sliders */
         var intr = setInterval(function(){
             $sliders = $('.slick-track, .swiper-wrapper, .owl-carousel');
             if (!$sliders.length) clearInterval(intr);
-
             $sliders.each(function() {
                 var $imgs = $(this).find('img');
                 var c = 0;
@@ -69,4 +67,4 @@
             });
         }, 2000);
     });
-</script>
+</script>