Merge pull request #16 from magepal/clockworkgeek-mage-init

Add individual data-mage-init attributes

Author: srenon

Block/Adminhtml/System/Config/Form/Composer/Version.php

@@ -11,10 +11,6 @@
 use Magento\Catalog\Block\Product\Image;
 use MagePal\CatalogLazyLoad\Helper\Data;
 
-/**
- * Class ImagePlugin
- * @package MagePal\CatalogLazyLoad\Plugin\Block\Product
- */
 class ImagePlugin
 {
     /** @var Data */
@@ -31,46 +27,43 @@ public function __construct(
 
     /**
      * @param Image $subject
-     * @param Closure $proceed
-     * @return mixed
+     * @param string $result
+     * @return string
      */
-    public function aroundToHtml(Image $subject, Closure $proceed)
+    public function afterToHtml(Image $subject, $result)
     {
         if ($this->helper->isEnabled() && $this->helper->applyLazyLoad()) {
-            $orgImageUrl = $subject->getImageUrl();
-            $subject->setImageUrl('');
-
-            //Magento 2.4.0
-            if (is_array($subject->getCustomAttributes())) {
-                $customAttributes = array_merge(
-                    $subject->getCustomAttributes(),
-                    ['magepal-data-original' => 'placeholder']
-                );
-            } else {
-                $customAttributes = trim(
-                    $subject->getCustomAttributes() . 'magepal-data-original'
-                );
-            }
 
-            $subject->setCustomAttributes($customAttributes);
+            $result = preg_replace_callback(
+                '#<img(?:\s+[-\w]+=(?:"[^"]*"|\'[^\']*\'))+\s*/>#mu',
+                function ($matches) {
+                    $img = $matches[0];
+                    $search = [' src="'];
+                    $replace = [' data-original="'];
 
-            $result = $proceed();
+                    if (strpos($img, 'class=') === false) {
+                        $search[] = '/>';
+                        $replace[] = ' class="swatch-option-loading" />';
+                    } else {
+                        $search[] = ' class="';
+                        $replace[] = ' class="swatch-option-loading ';
+                    }
 
-            $find = [
-                'img class="',
-                'magepal-data-original="placeholder"',
-                'magepal-data-original'
-            ];
+                    if (strpos($img, 'data-mage-init=') === false) {
+                        $search[] = '/>';
+                        $replace[] = ' data-mage-init=\'{"MagePalLazyLoad":{}}\' />';
+                    } else {
+                        $search[] = ' data-mage-init=\'{';
+                        $replace[] = ' data-mage-init=\'{"MagePalLazyLoad":{},';
+                    }
 
-            $replace = [
-                'img class="lazy swatch-option-loading ',
-                sprintf(' data-original="%s"', $orgImageUrl),
-                sprintf(' data-original="%s"', $orgImageUrl)
-            ];
-
-            return str_replace($find, $replace, $result);
-        } else {
-            return $proceed();
+                    return str_replace($search, $replace, $img);
+                },
+                $result
+            );
         }
+
+        return $result;
     }
 }
+

Block/Adminhtml/System/Config/Form/Module/Version.php

@@ -23,7 +23,7 @@ Unlike other Lazy Load extensions for Magento, our extension take into considera
 This is important because:
 
 1. Your site will appear to load much faster to your customer because they won't have to wait for Javascript to activate your images.
-2. Your products images will start to display immediately as your browser fetches them, instead of waiting for Javascript to activate them which will normally cause 1-5 seconds delay and largely depended on the speed of your customer's computer.
+2. Your products image will start to display immediately as your browser fetches them, instead of waiting for Javascript to activate them which will normally cause 1-5 seconds delay and largely depended on the speed of your customer's computer.
 3. On subsequences visit, your top 'x' images just appear because they are already cached, while other extensions will still delay loading. 
 
 You can quickly and easily configure the number of images to show instantly base on your site need in our configurable in system configuration.
@@ -78,4 +78,4 @@ Magento 2 Extensions
 - [Order Confirmation Page Miscellaneous Scripts](https://www.magepal.com/magento2/extensions/order-confirmation-miscellaneous-scripts-for-magento-2.html)
 - [HTML Minifier for Magento2](https://www.magepal.com/magento2/extensions/html-minifier.html)
 
-© MagePal LLC. | [www.magepal.com](https:/www.magepal.com)
+© MagePal LLC. | [www.magepal.com](https://www.magepal.com)

Block/Js.php

@@ -19,10 +19,10 @@
         "php": "~5.6.0|7.0.2|7.0.4|~7.0.6|~7.1.0|~7.1.3|~7.2.0|~7.3.0|~7.4.0",
         "magento/module-backend": "100.0.*|100.1.*|100.2.*|101.0.*|102.0.*",
         "magento/framework": "100.0.*|100.1.*|101.0.*|102.0.*|103.0.*",
-        "magepal/magento2-core":">1.1.0"
+        "magepal/magento2-core":">=1.1.9"
     },
     "type": "magento2-module",
-    "version": "1.7.2",
+    "version": "1.8.0",
     "license": [
         "proprietary"
     ],