├── Block
    ├── Adminhtml
    │   └── System
    │   │   └── Config
    │   │       └── Form
    │   │           ├── DynamicRow.php
    │   │           └── Info.php
    └── Lazy.php
├── LICENSE.txt
├── Model
    ├── Config.php
    └── Config
    │   └── Source
    │       ├── BlocksToLazyLoad.php
    │       └── Method.php
├── Observer
    └── LayoutLoadBeforeObserver.php
├── Plugin
    ├── Amasty
    │   └── PageSpeedOptimizer
    │   │   └── Model
    │   │       └── Output
    │   │           └── LazyLoadProcessorPlugin.php
    ├── BlockPlugin.php
    ├── Magefan
    │   └── WebP
    │   │   ├── Api
    │   │       └── HtmlParserInterfacePlugin.php
    │   │   └── Model
    │   │       └── WebPPlugin.php
    └── Magento
    │   └── PageBuilder
    │       └── Model
    │           └── Filter
    │               └── Template.php
├── README.md
├── Setup
    └── Patch
    │   └── Data
    │       └── ConvertConfigToJsonPatch.php
├── composer.json
├── etc
    ├── acl.xml
    ├── adminhtml
    │   └── system.xml
    ├── config.xml
    ├── di.xml
    ├── frontend
    │   ├── di.xml
    │   └── events.xml
    └── module.xml
├── registration.php
└── view
    ├── adminhtml
        ├── pagebuilder
        │   └── content_type
        │   │   └── image.xml
        └── ui_component
        │   └── pagebuilder_image_form.xml
    └── frontend
        ├── layout
            ├── default.xml
            └── mflazyzoad_no_js.xml
        ├── templates
            └── lazy.phtml
        └── web
            ├── images
                └── pixel.jpg
            └── js
                └── lazyload.min.js


/Block/Adminhtml/System/Config/Form/DynamicRow.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | namespace Magefan\LazyLoad\Block\Adminhtml\System\Config\Form;
12 | 
13 | use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
14 | 
15 | class DynamicRow extends AbstractFieldArray
16 | {
17 |     /**
18 |      * Prepare rendering the new field by adding all the needed columns
19 |      */
20 |     protected function _prepareToRender()
21 |     {
22 |         $this->addColumn('block_identifier', ['label' => __('Block Identifier'), 'style' => 'width:350px']);
23 |         $this->addColumn('first_images_to_skip', ['label' => __('First Images To Skip'), 'style' => 'width:70px']);
24 |         $this->_addAfter = false;
25 |         $this->_addButtonLabel = __('Add');
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/Block/Adminhtml/System/Config/Form/Info.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | namespace Magefan\LazyLoad\Block\Adminhtml\System\Config\Form;
12 | 
13 | /**
14 |  * Admin blog configurations information block
15 |  */
16 | class Info extends \Magefan\Community\Block\Adminhtml\System\Config\Form\Info
17 | {
18 |     /**
19 |      * Return extension url
20 |      * @return string
21 |      */
22 |     protected function getModuleUrl()
23 |     {
24 |         return 'https://mage' . 'fan.com/magento-2-image-lazy-load-extension';
25 |     }
26 | 
27 |     /**
28 |      * Return extension title
29 |      * @return string
30 |      */
31 |     protected function getModuleTitle()
32 |     {
33 |         return 'Image Lazy Load Extension';
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/Block/Lazy.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | namespace Magefan\LazyLoad\Block;
12 | 
13 | use Magento\Framework\View\Element\Template;
14 | use Magento\Framework\View\Element\Template\Context;
15 | use Magefan\LazyLoad\Model\Config;
16 | 
17 | /**
18 |  * Init lazy load
19 |  */
20 | class Lazy extends Template
21 | {
22 |     /**
23 |      * @param Context $context
24 |      * @param Config $config
25 |      * @param array $data
26 |      */
27 |     public function __construct(
28 |         Context $context,
29 |         Config $config,
30 |         array $data = []
31 |     ) {
32 |         parent::__construct($context, $data);
33 |         $this->config = $config;
34 |     }
35 | 
36 |     /**
37 |      * Retrieve block html
38 |      *
39 |      * @return string
40 |      */
41 |     protected function _toHtml()
42 |     {
43 |         if ($this->config->getEnabled()) {
44 |             return parent::_toHtml();
45 |         }
46 | 
47 |         return '';
48 |     }
49 | 
50 |     /**
51 |      * @return bool
52 |      */
53 |     public function isNoScriptEnabled(): bool
54 |     {
55 |         return (bool)$this->config->isNoScriptEnabled();
56 |     }
57 | 
58 |     /**
59 |      * @return bool
60 |      */
61 |     public function getIsJavascriptLazyLoadMethod(): bool
62 |     {
63 |         return $this->config->getIsJavascriptLazyLoadMethod();
64 |     }
65 | 
66 |     /**
67 |      * Retrieve lazy load config json string
68 |      *
69 |      * @return string
70 |      */
71 |     public function getLazyLoadConfig(): string
72 |     {
73 |         $config = $this->getData('lazy_load_config');
74 | 
75 |         if (!is_array($config)) {
76 |             $config = [];
77 |         }
78 | 
79 |         if (!isset($config['elements_selector'])) {
80 |             $config['elements_selector'] = 'img,div';
81 |         }
82 | 
83 |         if (!isset($config['data_srcset'])) {
84 |             $config['data_srcset'] = 'originalset';
85 |         }
86 | 
87 |         return json_encode($config);
88 |     }
89 | }
90 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement)


--------------------------------------------------------------------------------
/Model/Config.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
  4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
  5 |  *
  6 |  * Glory to Ukraine! Glory to the heroes!
  7 |  */
  8 | 
  9 | declare(strict_types=1);
 10 | 
 11 | namespace Magefan\LazyLoad\Model;
 12 | 
 13 | use Magento\Framework\App\Helper\Context;
 14 | use Magento\Framework\Serialize\SerializerInterface;
 15 | use Magefan\LazyLoad\Model\Config\Source\Method;
 16 | use Magefan\LazyLoad\Model\Config\Source\BlocksToLazyLoad;
 17 | 
 18 | /**
 19 |  * Lazy load config
 20 |  */
 21 | class Config extends \Magento\Framework\App\Helper\AbstractHelper
 22 | {
 23 |     const XML_PATH_ENABLED = 'mflazyzoad/general/enabled';
 24 |     const XML_PATH_AMP_ENABLED = 'pramp/general/enabled';
 25 |     const XML_PATH_LAZY_BLOCKS = 'mflazyzoad/general/lazy_blocks';
 26 |     const XML_PATH_LAZY_METHOD = 'mflazyzoad/general/method';
 27 |     const XML_PATH_LAZY_NOSCRIPT = 'mflazyzoad/general/noscript';
 28 |     const XML_PATH_LAZY_BLOCKS_TO_LAZY_LOAD = 'mflazyzoad/general/blocks_to_lazy_load';
 29 | 
 30 |     /**
 31 |      * @var array
 32 |      */
 33 |     protected $blocks;
 34 | 
 35 |     /**
 36 |      * @var bool
 37 |      */
 38 |     protected $enabled;
 39 | 
 40 |     /**
 41 |      * @var SerializerInterface
 42 |      */
 43 |     protected $serializer;
 44 | 
 45 |     /**
 46 |      * @param Context $context
 47 |      * @param SerializerInterface $serializer
 48 |      */
 49 |     public function __construct(
 50 |         Context $context,
 51 |         SerializerInterface $serializer
 52 |     ) {
 53 |         $this->serializer = $serializer;
 54 |         parent::__construct($context);
 55 |     }
 56 | 
 57 |     /**
 58 |      * Retrieve store config value
 59 |      * @param  string $path
 60 |      * @return mixed
 61 |      */
 62 |     public function getConfig($path)
 63 |     {
 64 |         return $this->scopeConfig->getValue(
 65 |             $path,
 66 |             \Magento\Store\Model\ScopeInterface::SCOPE_STORE
 67 |         );
 68 |     }
 69 | 
 70 |     /**
 71 |      * @return bool
 72 |      */
 73 |     public function getIsJavascriptLazyLoadMethod(): bool
 74 |     {
 75 |         return (Method::JAVASCRIPT === (int)$this->getConfig(self::XML_PATH_LAZY_METHOD));
 76 |     }
 77 | 
 78 |     /**
 79 |      * @return bool
 80 |      */
 81 |     public function isAllBlocksAddedToLazy(): bool
 82 |     {
 83 |         return (BlocksToLazyLoad::ALL === (int)$this->getConfig(self::XML_PATH_LAZY_BLOCKS_TO_LAZY_LOAD));
 84 |     }
 85 | 
 86 |     /**
 87 |      * @return bool
 88 |      */
 89 |     public function isNoScriptEnabled(): bool
 90 |     {
 91 |         return (bool)$this->getConfig(self::XML_PATH_LAZY_NOSCRIPT)
 92 |             && $this->getIsJavascriptLazyLoadMethod();
 93 |     }
 94 | 
 95 |     /**
 96 |      * Retrieve alloved blocks info
 97 |      * @return array
 98 |      */
 99 |     public function getBlocks(): array
100 |     {
101 |         return array_keys($this->getBlocksInfo());
102 |     }
103 | 
104 |     /**
105 |      * @param $blockIdentifier
106 |      * @return int
107 |      */
108 |     public function getBlockFirstImagesToSkip($blockIdentifier): int
109 |     {
110 |         $blockInfo = $this->getBlocksInfo();
111 |         if (isset($blockInfo[$blockIdentifier])) {
112 |             return (int)$blockInfo[$blockIdentifier];
113 |         }
114 | 
115 |         return 0;
116 |     }
117 | 
118 |     /**
119 |      * @return array
120 |      */
121 |     public function getBlocksInfo(): array
122 |     {
123 |         if (null === $this->blocks) {
124 |             $this->blocks = [];
125 | 
126 |             try {
127 |                 $blocks = $this->serializer->unserialize($this->getConfig(self::XML_PATH_LAZY_BLOCKS));
128 |             } catch (\InvalidArgumentException $e) {
129 |                 return $this->blocks;
130 |             }
131 | 
132 |             foreach ($blocks as $blockData) {
133 |                 if (!isset($blockData['block_identifier']) || !isset($blockData['first_images_to_skip'])) {
134 |                     continue;
135 |                 }
136 | 
137 |                 $this->blocks[$blockData['block_identifier']] = $blockData['first_images_to_skip'];
138 |             }
139 |         }
140 | 
141 |         return $this->blocks;
142 |     }
143 | 
144 |     /**
145 |      * Retrieve true if enabled
146 |      * @return bool
147 |      */
148 |     public function getEnabled(): bool
149 |     {
150 |         if (null === $this->enabled) {
151 |             $this->enabled = (bool)$this->getConfig(self::XML_PATH_ENABLED);
152 | 
153 |             /* check if Plumrocket AMP enabled */
154 |             if ($this->enabled) {
155 |                 /* We know that using objectManager is not a not a good practice,
156 |                     but if Plumrocket_AMP is not installed on your magento instance
157 |                     you'll get error during di:compile */
158 |                 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
159 | 
160 |                 $isAmpRequest = $this->getConfig(self::XML_PATH_AMP_ENABLED);
161 |                 if ($isAmpRequest) {
162 |                     $isAmpRequest = $objectManager->get('\Plumrocket\Amp\Helper\Data')
163 |                         ->isAmpRequest();
164 |                 } else {
165 |                     $isAmpRequest = $objectManager->get(\Magento\Framework\App\RequestInterface::class)
166 |                         ->getParam('is_amp');
167 |                 }
168 |                 $this->enabled = !$isAmpRequest;
169 |             }
170 |         }
171 | 
172 |         return $this->enabled;
173 |     }
174 | }
175 | 


--------------------------------------------------------------------------------
/Model/Config/Source/BlocksToLazyLoad.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | declare(strict_types=1);
 9 | 
10 | namespace Magefan\LazyLoad\Model\Config\Source;
11 | 
12 | class BlocksToLazyLoad implements \Magento\Framework\Option\ArrayInterface
13 | {
14 | 
15 |     const ALL = 0;
16 |     const SELECTED = 1;
17 | 
18 |     /**
19 |      * @return array[]
20 |      */
21 |     public function toOptionArray(): array
22 |     {
23 |         return  [
24 |             ['value' => self::ALL, 'label' => __('All')],
25 |             ['value' => self::SELECTED, 'label' => __('Selected')],
26 |         ];
27 |     }
28 | 
29 |     /**
30 |      * Get options in "key-value" format
31 |      *
32 |      * @return array
33 |      */
34 |     public function toArray(): array
35 |     {
36 |         $array = [];
37 |         foreach ($this->toOptionArray() as $item) {
38 |             $array[$item['value']] = $item['label'];
39 |         }
40 |         return $array;
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/Model/Config/Source/Method.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | declare(strict_types=1);
 9 | 
10 | namespace Magefan\LazyLoad\Model\Config\Source;
11 | 
12 | /**
13 |  * Comment statuses
14 |  */
15 | class Method implements \Magento\Framework\Option\ArrayInterface
16 | {
17 |     /**
18 |      * @const string
19 |      */
20 |     const JAVASCRIPT = 0;
21 | 
22 |     /**
23 |      * @const int
24 |      */
25 |     const NATIVE = 1;
26 | 
27 | 
28 |     /**
29 |      * Options int
30 |      *
31 |      * @return array
32 |      */
33 |     public function toOptionArray(): array
34 |     {
35 |         return  [
36 |             ['value' => self::JAVASCRIPT, 'label' => __('Non-jQuery JavaScript Library (Requires Advanced Configuration)')],
37 |             ['value' => self::NATIVE, 'label' => __('Native Browser Lazy Loading')],
38 |         ];
39 |     }
40 | 
41 |     /**
42 |      * Get options in "key-value" format
43 |      *
44 |      * @return array
45 |      */
46 |     public function toArray(): array
47 |     {
48 |         $array = [];
49 |         foreach ($this->toOptionArray() as $item) {
50 |             $array[$item['value']] = $item['label'];
51 |         }
52 |         return $array;
53 |     }
54 | }
55 | 


--------------------------------------------------------------------------------
/Observer/LayoutLoadBeforeObserver.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types = 1);
10 | 
11 | namespace Magefan\LazyLoad\Observer;
12 | 
13 | use Magefan\LazyLoad\Model\Config;
14 | use Magento\Framework\Event\ObserverInterface;
15 | 
16 | /**
17 |  * Class LayoutLoadBeforeObserver used to add attribute to layout
18 |  */
19 | class LayoutLoadBeforeObserver implements ObserverInterface
20 | {
21 |     /**
22 |      * @var Config
23 |      */
24 |     protected $config;
25 | 
26 |     /**
27 |      * LayoutLoadBeforeObserver constructor.
28 |      * @param Config $config
29 |      */
30 |     public function __construct(
31 |         Config $config
32 |     ) {
33 |         $this->config = $config;
34 |     }
35 | 
36 |     /**
37 |      * @param \Magento\Framework\Event\Observer $observer
38 |      * @return void
39 |      * @SuppressWarnings(PHPMD.UnusedFormalParameter)
40 |      */
41 |     public function execute(\Magento\Framework\Event\Observer $observer)
42 |     {
43 |         if ($this->config->getEnabled() && $this->config->isNoScriptEnabled()) {
44 |             $layout = $observer->getLayout();
45 |             $layout->getUpdate()->addHandle('mflazyzoad_no_js');
46 |         }
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/Plugin/Amasty/PageSpeedOptimizer/Model/Output/LazyLoadProcessorPlugin.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
  4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
  5 |  *
  6 |  * Glory to Ukraine! Glory to the heroes!
  7 |  */
  8 | 
  9 | declare(strict_types=1);
 10 | 
 11 | namespace Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output;
 12 | 
 13 | use Magefan\LazyLoad\Model\Config;
 14 | 
 15 | /**
 16 |  * Class LazyLoadProcessorPlugin
 17 |  */
 18 | class LazyLoadProcessorPlugin
 19 | {
 20 | /**
 21 |  * @var Config
 22 |  */
 23 |     private $config;
 24 | 
 25 |     /**
 26 |      * LazyLoadProcessorPlugin constructor.
 27 |      * @param Config $config
 28 |      */
 29 |     public function __construct(
 30 |         Config $config
 31 |     ) {
 32 |         $this->config = $config;
 33 |     }
 34 | 
 35 |     /**
 36 |      * @param $subject
 37 |      * @param callable $proceed
 38 |      * @param $image
 39 |      * @param $imagePath
 40 |      * @return mixed|null|string|string[]
 41 |      */
 42 |     public function aroundReplaceWithPictureTag($subject, callable $proceed, $image, $imagePath)
 43 |     {
 44 |         if (!$this->config->getEnabled() || !$this->config->getIsJavascriptLazyLoadMethod()) {
 45 |             return $proceed($image, $imagePath);
 46 |         }
 47 | 
 48 |         $originImagePath = $imagePath;
 49 | 
 50 |         if (strpos($imagePath, 'Magefan_LazyLoad/images/pixel.jpg')) {
 51 | 
 52 |             $doStr = 'data-original="';
 53 |             $p1 = strpos($image, $doStr);
 54 | 
 55 |             if ($p1 !== false) {
 56 |                 $p1 += strlen($doStr);
 57 |                 $p2 = strpos($image, '"', $p1);
 58 |                 if ($p2 !== false) {
 59 |                     $imagePath = substr($image, $p1, $p2 - $p1);
 60 |                 }
 61 |             }
 62 |         }
 63 | 
 64 |         $html = $proceed($image, $imagePath);
 65 | 
 66 |         if ($originImagePath != $imagePath) {
 67 | 
 68 |             if (strpos($html, '<picture') !== false) {
 69 |                 $tmpSrc = 'TMP_SRC';
 70 |                 $pixelSrc = 'srcset="' . $originImagePath . '"';
 71 | 
 72 |                 $html = str_replace($pixelSrc, $tmpSrc, $html);
 73 | 
 74 |                 $html = preg_replace('#<source\s+([^>]*)(?:srcset="([^"]*)")([^>]*)?>#isU', '<source ' . $pixelSrc .
 75 |                     ' data-originalset="$2" $1 $3/>', $html);
 76 | 
 77 |                 $html = str_replace($tmpSrc, $pixelSrc, $html);
 78 |             }
 79 |         }
 80 | 
 81 |         return $html;
 82 |     }
 83 | 
 84 |     /**
 85 |      * @param $subject
 86 |      * @param callable $proceed
 87 |      * @param algorithm
 88 |      * @param $image
 89 |      * @param $imagePath
 90 |      * @return mixed|null|string|string[]
 91 |      */
 92 |     public function aroundReplace($subject, callable $proceed, $algorithm, $image, $imagePath)
 93 |     {
 94 | 
 95 |         if (!$this->config->getEnabled() || !$this->config->getIsJavascriptLazyLoadMethod()) {
 96 |             return $proceed($algorithm, $image, $imagePath);
 97 |         }
 98 | 
 99 |         $originImagePath = $imagePath;
100 | 
101 |         if (strpos($imagePath, 'Magefan_LazyLoad/images/pixel.jpg')) {
102 | 
103 |             $doStr = 'data-original="';
104 |             $p1 = strpos($image, $doStr);
105 | 
106 |             if ($p1 !== false) {
107 |                 $p1 += strlen($doStr);
108 |                 $p2 = strpos($image, '"', $p1);
109 |                 if ($p2 !== false) {
110 |                     $imagePath = substr($image, $p1, $p2 - $p1);
111 |                 }
112 |             }
113 |         }
114 | 
115 |         $html = $proceed($algorithm, $image, $imagePath);
116 | 
117 |         if ($originImagePath != $imagePath) {
118 | 
119 |             if (strpos($html, '<picture') !== false) {
120 |                 $tmpSrc = 'TMP_SRC';
121 |                 $pixelSrc = 'srcset="' . $originImagePath . '"';
122 | 
123 |                 $html = str_replace($pixelSrc, $tmpSrc, $html);
124 | 
125 |                 $html = preg_replace('#<source\s+([^>]*)(?:srcset="([^"]*)")([^>]*)?>#isU', '<source ' . $pixelSrc .
126 |                     ' data-originalset="$2" $1 $3/>', $html);
127 | 
128 |                 $html = str_replace($tmpSrc, $pixelSrc, $html);
129 |             }
130 |         }
131 | 
132 |         return $html;
133 |     }
134 | }
135 | 


--------------------------------------------------------------------------------
/Plugin/BlockPlugin.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
  4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
  5 |  *
  6 |  * Glory to Ukraine! Glory to the heroes!
  7 |  */
  8 | 
  9 | declare(strict_types = 1);
 10 | 
 11 | namespace Magefan\LazyLoad\Plugin;
 12 | 
 13 | use Magefan\LazyLoad\Model\Config;
 14 | 
 15 | /**
 16 |  * Plugin for sitemap generation
 17 |  */
 18 | class BlockPlugin
 19 | {
 20 |     const LAZY_TAG = '<!-- MAGEFAN_LAZY_LOAD -->';
 21 | 
 22 |     const REPLACEMENT_LABEL = 'mf-lazy';
 23 | 
 24 |     const PATTERN = '#<img(?!\s+mfdislazy)([^>]*)(?:\ssrc="([^"]*)")([^>]*)\/?>#isU';
 25 | 
 26 |     /**
 27 |      * Request
 28 |      * @var \Magento\Framework\App\RequestInterface
 29 |      */
 30 |     protected $request;
 31 | 
 32 |     /**
 33 |      * Core store config
 34 |      *
 35 |      * @var \Magento\Framework\App\Config\ScopeConfigInterface
 36 |      */
 37 |     protected $scopeConfig;
 38 | 
 39 |     /**
 40 |      * @var array
 41 |      */
 42 |     protected $blocks;
 43 | 
 44 |     /**
 45 |      * Lazy store config
 46 |      *
 47 |      * @var \Magefan\LazyLoad\Model\Config
 48 |      */
 49 |     protected $config;
 50 | 
 51 |     /**
 52 |      * @var array
 53 |      */
 54 |     protected $skipBlocks = [];
 55 | 
 56 |     /**
 57 |      * @param \Magento\Framework\App\RequestInterface $request
 58 |      * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
 59 |      * @param Config $config
 60 |      * @param array $skipBlocks
 61 |      */
 62 |     public function __construct(
 63 |         \Magento\Framework\App\RequestInterface $request,
 64 |         \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
 65 |         Config $config,
 66 |         array $skipBlocks
 67 |     ) {
 68 |         $this->request = $request;
 69 |         $this->scopeConfig = $scopeConfig;
 70 |         $this->config = $config;
 71 |         $this->skipBlocks = $skipBlocks;
 72 |     }
 73 | 
 74 |     /**
 75 |      * @param \Magento\Framework\View\Element\AbstractBlock $block
 76 |      * @param string $html
 77 |      * @return string
 78 |      */
 79 |     public function afterToHtml(\Magento\Framework\View\Element\AbstractBlock $block, $html)
 80 |     {
 81 |         if (!$html || !$this->isEnabled($block, (string)$html)) {
 82 |             return $html;
 83 |         }
 84 | 
 85 |         $numberOfReplacements = $this->config->getBlockFirstImagesToSkip($this->getBlockIdentifier($block));
 86 | 
 87 |         if ($numberOfReplacements) {
 88 |             $html = $this->removeLoadingLazyAttributeFromFirstNImages($html, $numberOfReplacements);
 89 |         }
 90 | 
 91 |         $html = $this->config->getIsJavascriptLazyLoadMethod()
 92 |             ? $this->prepareForJsLazyLoad($block, $html)
 93 |             : $this->prepareForNativeBrowserLazyLoad($html);
 94 | 
 95 |         return $html;
 96 |     }
 97 | 
 98 | 
 99 |     /**
100 |      * @param string $html
101 |      * @return string
102 |      */
103 |     private function prepareForJsLazyLoad($block, string $html): string
104 |     {
105 |         $lazyAttribute = ' data-original=';
106 | 
107 |         $pixelSrc = ' src="' . $block->getViewFileUrl('Magefan_LazyLoad::images/pixel.jpg') . '"';
108 |         $tmpSrc = 'TMP_SRC';
109 |         $tmpDataOriginal = 'TMP_DATA_ORIGINAL';
110 | 
111 |         $html = str_replace($pixelSrc, $tmpSrc, $html);
112 |         $html = str_replace($lazyAttribute, $tmpDataOriginal, $html);
113 | 
114 |         $noscript = '';
115 |         if ($this->config->isNoScriptEnabled()) {
116 |             $noscript = '<noscript>
117 |                     <img src="$2"  $1 $3  />
118 |                 </noscript>';
119 |         }
120 | 
121 |         $html = preg_replace(
122 |             self::PATTERN,
123 |             '<img data-original="$2" $1 $3/>' . $noscript,
124 |             $html
125 |         );
126 | 
127 |         $html = str_replace($lazyAttribute, $pixelSrc . $lazyAttribute, $html);
128 | 
129 |         $html = str_replace($tmpSrc, $pixelSrc, $html);
130 |         $html = str_replace($tmpDataOriginal, $lazyAttribute, $html);
131 |         $html = str_replace(self::LAZY_TAG, '', $html);
132 | 
133 |         /* Disable Owl Slider LazyLoad */
134 |         $html = str_replace(
135 |             ['"lazyLoad":true,', '&quot;lazyLoad&quot;:true,', 'owl-lazy'],
136 |             ['"lazyLoad":false,', '&quot;lazyLoad&quot;:false,', ''],
137 |             $html
138 |         );
139 | 
140 |         /* Fix for page builder bg images */
141 |         if (false !== strpos($html, 'background-image-')) {
142 |             $html = str_replace('.background-image-', '.tmpbgimg-', $html);
143 |             $html = str_replace('background-image-', 'mflazy-background-image mflazy-background-image-', $html);
144 |             $html = str_replace('.tmpbgimg-', '.background-image-', $html);
145 |         }
146 | 
147 |         return $html;
148 |     }
149 | 
150 |     /**
151 |      * @param string $html
152 |      * @return string
153 |      */
154 |     protected function prepareForNativeBrowserLazyLoad(string $html) :string
155 |     {
156 |         return preg_replace(self::PATTERN, '<img src="$2" $1 $3 loading="lazy" />', $html);
157 |     }
158 | 
159 |     /**
160 |      * @param \Magento\Framework\View\Element\AbstractBlock $block
161 |      * @return string
162 |      */
163 |     protected function getBlockIdentifier(\Magento\Framework\View\Element\AbstractBlock $block): string
164 |     {
165 |         $blockName = $block->getBlockId() ?: $block->getNameInLayout();
166 |         $blockTemplate = $block->getTemplate();
167 |         $blocks = $this->config->getBlocks();
168 | 
169 |         if (in_array($blockName, $blocks)) {
170 |             return $blockName;
171 |         } elseif (in_array(get_class($block), $blocks)) {
172 |             return get_class($block);
173 |         } elseif (in_array($blockTemplate, $blocks)) {
174 |             return $blockTemplate;
175 |         }
176 | 
177 |         return '';
178 |     }
179 | 
180 |     /**
181 |      * @param string $html
182 |      * @param int $numberOfReplacements
183 |      * @return string
184 |      */
185 |     protected function removeLoadingLazyAttributeFromFirstNImages(string $html, int $numberOfReplacements):string
186 |     {
187 |         $position = 0;
188 | 
189 |         if (preg_match_all(self::PATTERN, $html, $matches, PREG_OFFSET_CAPTURE) !== false) {
190 |             foreach ($matches[0] as $i => $match) {
191 |                 if ($i > $numberOfReplacements - 1) {
192 |                     break;
193 |                 }
194 | 
195 |                 $offset = $match[1] + $position;
196 |                 $htmlTag = $matches[0][$i][0];
197 | 
198 |                 $newHtmlTag = str_replace(
199 |                     ['loading="lazy"', '<img '],
200 |                     ['', '<img mfdislazy="1" fetchpriority="high" '],
201 |                     $htmlTag
202 |                 );
203 | 
204 |                 $html = substr_replace($html, $newHtmlTag, $offset, strlen($htmlTag));
205 |                 $position = $position + (strlen($newHtmlTag) - strlen($htmlTag));
206 |             }
207 |         }
208 | 
209 |         return $html;
210 |     }
211 | 
212 |     /**
213 |      * Check if lazy load is available for block
214 |      * @param \Magento\Framework\View\Element\AbstractBlock $block
215 |      * @param string $html
216 |      * @return boolean
217 |      */
218 |     protected function isEnabled($block, string $html): bool
219 |     {
220 |         if (PHP_SAPI === 'cli'
221 |             || $this->request->isXmlHttpRequest()
222 |             || false !== stripos($this->request->getFullActionName(), 'ajax')
223 |             || false !== stripos($this->request->getServer('REQUEST_URI'), 'layerednavigationajax')
224 |             || $this->request->getParam('isAjax')
225 |         ) {
226 |             return false;
227 |         }
228 | 
229 |         if (!$this->config->getEnabled()) {
230 |             return false;
231 |         }
232 | 
233 |         if ($this->config->isAllBlocksAddedToLazy() && !$this->isBlockSkipped($block)) {
234 |             return true;
235 |         }
236 | 
237 |         if (false !== strpos($html, self::LAZY_TAG)) {
238 |             return true;
239 |         }
240 | 
241 |         if (!$this->getBlockIdentifier($block)) {
242 |             return false;
243 |         }
244 | 
245 |         return true;
246 |     }
247 | 
248 |     /**
249 |      * @param $block
250 |      * @return bool
251 |      */
252 |     private function isBlockSkipped($block): bool
253 |     {
254 |         return in_array(get_class($block), $this->skipBlocks);
255 |     }
256 | }
257 | 


--------------------------------------------------------------------------------
/Plugin/Magefan/WebP/Api/HtmlParserInterfacePlugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | namespace Magefan\LazyLoad\Plugin\Magefan\WebP\Api;
12 | 
13 | use Magefan\LazyLoad\Model\Config;
14 | 
15 | /**
16 |  * Class WebPPlugin
17 |  */
18 | class HtmlParserInterfacePlugin
19 | {
20 | 
21 |     /**
22 |      * @var Config
23 |      */
24 |     private $config;
25 | 
26 |     /**
27 |      * WebPPlugin constructor.
28 |      * @param Config $config
29 |      */
30 |     public function __construct(
31 |         Config $config
32 |     ) {
33 |         $this->config = $config;
34 |     }
35 | 
36 |     /**
37 |      * @param $subject
38 |      * @param callable $proceed
39 |      * @param $imagePath
40 |      * @param $htmlTag
41 |      * @return mixed|string|string[]|null
42 |      */
43 |     public function aroundGetNewHtmlTag($subject, callable $proceed, $imagePath, $image)
44 |     {
45 |         if (!$this->config->getEnabled() || !$this->config->getIsJavascriptLazyLoadMethod()) {
46 |             return $proceed($imagePath, $image);
47 |         }
48 | 
49 |         $originImagePath = $imagePath;
50 | 
51 |         if (strpos($imagePath, 'Magefan_LazyLoad/images/pixel.jpg')) {
52 | 
53 |             $doStr = 'data-original="';
54 |             $p1 = strpos($image, $doStr);
55 | 
56 |             if ($p1 !== false) {
57 |                 $p1 += strlen($doStr);
58 |                 $p2 = strpos($image, '"', $p1);
59 |                 if ($p2 !== false) {
60 |                     $imagePath = substr($image, $p1, $p2 - $p1);
61 |                 }
62 |             }
63 |         }
64 | 
65 |         $html = $proceed($imagePath, $image);
66 | 
67 |         if ($originImagePath != $imagePath) {
68 | 
69 |             if (strpos($html, '<picture') !== false) {
70 |                 $tmpSrc = 'TMP_SRC';
71 |                 $pixelSrc = 'srcset="' . $originImagePath . '"';
72 | 
73 |                 $html = str_replace($pixelSrc, $tmpSrc, $html);
74 | 
75 |                 $html = preg_replace('#<source([^>]*)(?:\ssrcset="([^"]*)")([^>]*)?>#isU', '<source ' . $pixelSrc .
76 |                     ' data-originalset="$2" $1 $3/>', $html);
77 | 
78 |                 $html = str_replace($tmpSrc, $pixelSrc, $html);
79 |             }
80 |         }
81 | 
82 |         return $html;
83 |     }
84 | }
85 | 


--------------------------------------------------------------------------------
/Plugin/Magefan/WebP/Model/WebPPlugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | namespace Magefan\LazyLoad\Plugin\Magefan\WebP\Model;
12 | 
13 | use Magefan\LazyLoad\Model\Config;
14 | 
15 | /**
16 |  * Class WebPPlugin
17 |  */
18 | class WebPPlugin
19 | {
20 | 
21 |     /**
22 |      * @var Config
23 |      */
24 |     private $config;
25 | 
26 |     /**
27 |      * WebPPlugin constructor.
28 |      * @param Config $config
29 |      */
30 |     public function __construct(
31 |         Config $config
32 |     ) {
33 |         $this->config = $config;
34 |     }
35 | 
36 |     /**
37 |      * @param $subject
38 |      * @param callable $proceed
39 |      * @param $imagePath
40 |      * @param $htmlTag
41 |      * @return mixed|string|string[]|null
42 |      */
43 |     public function aroundGetPictureTagHtml($subject, callable $proceed, $imagePath, $image)
44 |     {
45 |         if (!$this->config->getEnabled() || !$this->config->getIsJavascriptLazyLoadMethod()) {
46 |             return $proceed($imagePath, $image);
47 |         }
48 | 
49 |         $originImagePath = $imagePath;
50 | 
51 |         if (strpos($imagePath, 'Magefan_LazyLoad/images/pixel.jpg')) {
52 | 
53 |             $doStr = 'data-original="';
54 |             $p1 = strpos($image, $doStr);
55 | 
56 |             if ($p1 !== false) {
57 |                 $p1 += strlen($doStr);
58 |                 $p2 = strpos($image, '"', $p1);
59 |                 if ($p2 !== false) {
60 |                     $imagePath = substr($image, $p1, $p2 - $p1);
61 |                 }
62 |             }
63 |         }
64 | 
65 |         $html = $proceed($imagePath, $image);
66 | 
67 |         if ($originImagePath != $imagePath) {
68 | 
69 |             if (strpos($html, '<picture') !== false) {
70 |                 $tmpSrc = 'TMP_SRC';
71 |                 $pixelSrc = 'srcset="' . $originImagePath . '"';
72 | 
73 |                 $html = str_replace($pixelSrc, $tmpSrc, $html);
74 | 
75 |                 $html = preg_replace('#<source([^>]*)(?:\ssrcset="([^"]*)")([^>]*)?>#isU', '<source ' . $pixelSrc .
76 |                     ' data-originalset="$2" $1 $3/>', $html);
77 | 
78 |                 $html = str_replace($tmpSrc, $pixelSrc, $html);
79 |             }
80 |         }
81 | 
82 |         return $html;
83 |     }
84 | }
85 | 


--------------------------------------------------------------------------------
/Plugin/Magento/PageBuilder/Model/Filter/Template.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types = 1);
10 | 
11 | namespace Magefan\LazyLoad\Plugin\Magento\PageBuilder\Model\Filter;
12 | 
13 | use Magefan\LazyLoad\Model\Config;
14 | 
15 | class Template
16 | {
17 |     /**
18 |      * @var Config
19 |      */
20 |     private $config;
21 | 
22 |     /**
23 |      * @param Config $config
24 |      */
25 |     public function __construct(
26 |         Config $config
27 |     ) {
28 |         $this->config = $config;
29 |     }
30 | 
31 |     /**
32 |      * @param $subject
33 |      * @param $result
34 |      * @return mixed|string
35 |      */
36 |     public function afterFilter($subject, $result)
37 |     {
38 |         if ($this->config->getEnabled()) {
39 |             $this->moveMfDislazyAttributeDirectAfterImg($result);
40 |         }
41 | 
42 |         return $result;
43 |     }
44 | 
45 |     /**
46 |      * @param string $result
47 |      * @return void
48 |      */
49 |     private function moveMfDislazyAttributeDirectAfterImg(string &$result)
50 |     {
51 |         if (strpos($result, 'mfdislazy="1"') !== false) {
52 |             $result = explode('<img ', $result);
53 | 
54 |             foreach ($result as $key => $imgStart) {
55 |                 if (strpos($imgStart, 'mfdislazy="1"') !== false) {
56 |                     $result[$key] = 'mfdislazy="1" ' . str_replace('mfdislazy="1"', '', $imgStart);
57 |                 }
58 |             }
59 | 
60 |             $result = implode('<img ', $result);
61 |         }
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | #  [Magento 2 Image Lazy Load Extension](https://magefan.com/magento-2-image-lazy-load-extension) by Magefan
  2 | 
  3 | 
  4 | [![Total Downloads](https://poser.pugx.org/magefan/module-lazyload/downloads)](https://packagist.org/packages/magefan/module-lazyload)
  5 | [![Latest Stable Version](https://poser.pugx.org/magefan/module-lazyload/v/stable)](https://packagist.org/packages/magefan/module-lazyload)
  6 | 
  7 | <a href="https://savelife.in.ua/en/donate-en/#donate-army-card-monthly"><img width="830" height="208" src="https://cm.magefan.com/blog/support-ukraine.png"></a>
  8 | 
  9 | <img width="150" height="100" src="https://magefan.com/media/wysiwyg/made_in_ukraine.jpg">
 10 | 
 11 | 
 12 | ## Features
 13 |   * Allow to load images on your store only when customer can see them. Module reduces page size and number of request.
 14 | 
 15 | <a href="https://magefan.com/magento-2-image-lazy-load-extension"><img width="190" height="70" src="https://cm.magefan.com/wysiwyg/products/download-magefan-extensions.png"></a>
 16 | ## Useful Links
 17 |   * [User Guide](https://magefan.com/magento-2-image-lazy-load-extension/documentation)
 18 |   * [Change Log](https://magefan.com/magento-2-image-lazy-load-extension/change-log)
 19 |   * [FAQs](https://magefan.com/magento-2-image-lazy-load-extension#pattr-faq)
 20 | 
 21 | ## Compatibility
 22 |   * [Magento 2 WebP Optimized Images Extension](https://magefan.com/magento-2-webp-optimized-images)
 23 | 
 24 | ## Requirements
 25 |   * Magento Community Edition 2.0.x-2.4.x or Magento Enterprise Edition 2.0.x-2.4.x
 26 | 
 27 | ## Demo
 28 | 
 29 | Try out our open demo and if you like our extension **please give us some star on Github ★**
 30 | <table>
 31 |   <tbody>
 32 |     <tr>
 33 |       <td align="center" valign="middle">
 34 |         Storefront Demo
 35 |       </td>
 36 |       <td align="center" valign="middle">
 37 |         Admin Panel Demo
 38 |       </td align="center" valign="middle">
 39 |     </tr>
 40 |     <tr>
 41 |       <td align="center" valign="middle">
 42 |         <a href="https://opt.demo.magefan.top/">
 43 |           <img
 44 |             src="https://magefan.com/static/version1520969775/frontend/Magefan/new/en_US/images/product-tab-demo-1.jpg"
 45 |             alt="Magento 2 Image Lazy Load Extension Storefront Demo"
 46 |             height="220"
 47 |           >
 48 |         </a>
 49 |       </td>
 50 |       <td align="center" valign="middle">
 51 |         <a href="https://opt.demo.magefan.top/admin/admin/">
 52 |           <img
 53 |             src="https://cs.magefan.com/version1732118579/frontend/Magefan/next/en_US/Magefan_CssOptimizer/images/product-tab-demo-2.jpg"
 54 |             alt="Magento 2 Image Lazy Load Extension Admin Panel Demo"
 55 |             height="220"
 56 |           >
 57 |         </a>
 58 |       </td>
 59 |     </tr>
 60 |     <tr>
 61 |       <td align="center" valign="middle">
 62 |         <a href="https://opt.demo.magefan.top/">
 63 |           view
 64 |         </a>
 65 |       </td>
 66 |       <td align="center" valign="middle">
 67 |         <a href="https://opt.demo.magefan.top/admin/admin/">
 68 |           view
 69 |         </a>
 70 |       </td>
 71 |     </tr>
 72 |   </tbody>
 73 | </table>
 74 | 
 75 | 
 76 | 
 77 | ## Support
 78 | If you have any issues, please [contact us](mailto:support@magefan.com)
 79 | then if you still need help, open a bug report in GitHub's
 80 | [issue tracker](https://github.com/magefan/module-lazyload/issues).
 81 | 
 82 | Please do not use Magento Marketplace's Reviews or (especially) the Q&A for support.
 83 | There isn't a way for us to reply to reviews and the Q&A moderation is very slow.
 84 | 
 85 | ## License
 86 | The code is licensed under [EULA](https://magefan.com/end-user-license-agreement).
 87 | 
 88 | ## [Magento 2 Extensions](https://magefan.com/magento-2-extensions) by Magefan
 89 | 
 90 | ### [Magento 2 Google Extensions](https://magefan.com/magento-2-extensions/google-extensions)
 91 | 
 92 |   * [Magento 2 Google Indexing](https://magefan.com/magento-2-google-indexing-api)
 93 |   * [Magento 2 Google Analytics 4](https://magefan.com/magento-2-google-analytics-4)
 94 |   * [Magento 2 Google Tag Manager](https://magefan.com/magento-2-google-tag-manager)
 95 |   * [Magento 2 Google Shopping Feed](https://magefan.com/magento-2-google-shopping-feed-extension)
 96 |   * [Magento 2 Google Customer Reviews](https://magefan.com/magento-2-google-customer-reviews)
 97 | 
 98 | ### Magento 2 SEO Extensions
 99 | 
100 |   * [Magento 2 SEO Extension](https://magefan.com/magento-2-seo-extension)
101 |   * [Magento 2 Rich Snippets](https://magefan.com/magento-2-rich-snippets)
102 |   * [Magento 2 HTML Sitemap](https://magefan.com/magento-2-html-sitemap-extension)
103 |   * [Magento 2 XML Sitemap](https://magefan.com/magento-2-xml-sitemap-extension)
104 |   * [Magento 2 Facebook Open Graph](https://magefan.com/magento-2-open-graph-extension-og-tags)
105 |   * [Magento 2 Twitter Cards](https://magefan.com/magento-2-twitter-cards-extension)
106 | 
107 | 
108 | ### [Magento 2 Speed Optimization Extensions](https://magefan.com/magento-2-extensions/speed-optimization)
109 | 
110 |   * [Magento 2 Google Page Speed Optimizer](https://magefan.com/magento-2-google-page-speed-optimizer)
111 |   * [Magento 2 Full Page Cache Warmer](https://magefan.com/magento-2-full-page-cache-warmer)
112 |   * [Magento 2 WebP Images](https://magefan.com/magento-2-webp-optimized-images)
113 |   * [Magento 2 Rocket JavaScript](https://magefan.com/rocket-javascript-deferred-javascript)
114 | 
115 |   ### [Magento 2 Admin Panel Extensions](https://magefan.com/magento-2-extensions/admin-extensions)
116 | 
117 |   * [Magento 2 Size Chart Extension](https://magefan.com/magento-2-size-chart)
118 |   * [Magento 2 Security Extension](https://magefan.com/magento-2-security-extension)
119 |   * [Magento 2 Admin Action Log](https://magefan.com/magento-2-admin-action-log)
120 |   * [Magento 2 Order Editor](https://magefan.com/magento-2-edit-order-extension)
121 |   * [Magento 2 Better Order Grid](https://magefan.com/magento-2-better-order-grid-extension)
122 |   * [Magento 2 Extended Product Grid](https://magefan.com/magento-2-product-grid-inline-editor)
123 |   * [Magento 2 Product Tabs](https://magefan.com/magento-2/extensions/product-tabs)
124 |   * [Magento 2 Facebook Pixel](https://magefan.com/magento-2-facebook-pixel-extension)
125 |   * [Magento 2 Email Attachments](https://magefan.com/magento-2-email-attachments)
126 |   * [Magento 2 Admin View](https://magefan.com/magento-2-admin-view-extension)
127 |   * [Magento 2 Admin Email Notifications](https://magefan.com/magento-2-admin-email-notifications)
128 |   * [Magento 2 Login As Customer](https://magefan.com/login-as-customer-magento-2-extension)
129 | 
130 | ### Magento 2 Blog Extensions
131 | 
132 |   * [Magento 2 Blog](https://magefan.com/magento2-blog-extension)
133 |   * [Magento 2 Multi Blog](https://magefan.com/magento-2-multi-blog-extension)
134 |   * [Magento 2 Product Widget](https://magefan.com/magento-2-product-widget)
135 | 
136 | ### [Magento 2 Marketing Automation Extensions](https://magefan.com/magento-2-extensions/marketing-automation)
137 | 
138 |   * [Magento 2 Cookie Consent](https://magefan.com/magento-2-cookie-consent)
139 |   * [Magento 2 Product Labels](https://magefan.com/magento-2-product-labels)
140 |   * [Magento 2 Base Price](https://magefan.com/magento-2-base-price)
141 |   * [Magento 2 Dynamic Categories](https://magefan.com/magento-2-dynamic-categories)
142 |   * [Magento 2 Dynamic Blocks and Pages Extension](https://magefan.com/magento-2-cms-display-rules-extension)
143 |   * [Magento 2 Automatic Related Products](https://magefan.com/magento-2-automatic-related-products)
144 |   * [Magento 2 Price History](https://magefan.com/magento-2-price-history)
145 |   * [Magento 2 Mautic Integration](https://magefan.com/magento-2-mautic-extension)
146 |   * [Magento 2 YouTube Video](https://magefan.com/magento2-youtube-extension)    
147 |  
148 | ### [Magento 2 Cart Extensions](https://magefan.com/magento-2-extensions/cart-extensions)
149 | 
150 |   * [Magento 2 Checkout Extension](https://magefan.com/better-magento-2-checkout-extension)
151 |   * [Magento 2 Coupon Code](https://magefan.com/magento-2-coupon-code-link)
152 |   * [Magento 2 Guest to Customer](https://magefan.com/magento2-convert-guest-to-customer)
153 | 
154 | ### [Magento 2 Multi-Language Extensions](https://magefan.com/magento-2-extensions/multi-language-extensions)
155 | 
156 |   * [Magento 2 Hreflang Tags](https://magefan.com/magento2-alternate-hreflang-extension)
157 |   * [Magento 2 Auto Currency Switcher](https://magefan.com/magento-2-currency-switcher-auto-currency-by-country)
158 |   * [Magento 2 Auto Language Switcher](https://magefan.com/magento-2-auto-language-switcher)
159 |   * [Magento 2 GeoIP Store Switcher](https://magefan.com/magento-2-geoip-switcher-extension)
160 |   * [Magento 2 Translation](https://magefan.com/magento-2-translation-extension)
161 | 
162 | ### [Developers Tools](https://magefan.com/magento-2-extensions/developer-tools)
163 | 
164 |   * [Magento 2 Zero Downtime Deployment](https://magefan.com/blog/magento-2-zero-downtime-deployment)
165 |   * [Magento 2 Cron Schedule](https://magefan.com/magento-2-cron-schedule)
166 |   * [Magento 2 CLI Extension](https://magefan.com/magento2-cli-extension)
167 |   * [Magento 2 Conflict Detector](https://magefan.com/magento2-conflict-detector)
168 |      
169 |   ## [Shopify Apps](https://magefan.com/shopify/apps) by Magefan
170 | 
171 |   * [Shopify Login As Customer](https://apps.shopify.com/login-as-customer)
172 |   * [Shopify Blog](https://apps.shopify.com/magefan-blog)
173 |   * [Shopify Size Chart](https://magefan.com/shopify/apps/size-chart)
174 |   * [Shopify Google Indexer](https://magefan.com/shopify/apps/google-indexing)
175 |   * [Shopify Product Feeds](https://magefan.com/shopify/apps/product-feed)
176 | 


--------------------------------------------------------------------------------
/Setup/Patch/Data/ConvertConfigToJsonPatch.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
  4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
  5 |  *
  6 |  * Glory to Ukraine! Glory to the heroes!
  7 |  */
  8 | 
  9 | declare(strict_types = 1);
 10 | 
 11 | namespace Magefan\LazyLoad\Setup\Patch\Data;
 12 | 
 13 | use Magento\Framework\Setup\Patch\DataPatchInterface;
 14 | use Magento\Framework\Setup\ModuleDataSetupInterface;
 15 | use Magefan\LazyLoad\Model\Config as Config;
 16 | use Magento\Config\Model\ResourceModel\Config as Resource;
 17 | use Magento\Framework\Serialize\SerializerInterface;
 18 | use Psr\Log\LoggerInterface;
 19 | 
 20 | class ConvertConfigToJsonPatch implements DataPatchInterface
 21 | {
 22 |     /**
 23 |      * @var ModuleDataSetupInterface
 24 |      */
 25 |     private $moduleDataSetup;
 26 | 
 27 |     /**
 28 |      * @var Config
 29 |      */
 30 |     private $config;
 31 | 
 32 |     /**
 33 |      * @var Resource
 34 |      */
 35 |     private $resource;
 36 | 
 37 |     /**
 38 |      * @var SerializerInterface
 39 |      */
 40 |     private $serializer;
 41 | 
 42 |     /**
 43 |      * @var LoggerInterface
 44 |      */
 45 |     private $logger;
 46 | 
 47 |     /**
 48 |      * @param ModuleDataSetupInterface $moduleDataSetup
 49 |      * @param Config $config
 50 |      * @param Resource $resource
 51 |      * @param SerializerInterface $serializer
 52 |      * @param LoggerInterface $logger
 53 |      */
 54 |     public function __construct(
 55 |         ModuleDataSetupInterface $moduleDataSetup,
 56 |         Config $config,
 57 |         Resource $resource,
 58 |         SerializerInterface $serializer,
 59 |         LoggerInterface $logger
 60 |     ) {
 61 |         $this->moduleDataSetup = $moduleDataSetup;
 62 |         $this->config = $config;
 63 |         $this->resource = $resource;
 64 |         $this->serializer = $serializer;
 65 |         $this->logger = $logger;
 66 |     }
 67 | 
 68 |     /**
 69 |      * @return void
 70 |      */
 71 |     public function apply()
 72 |     {
 73 |         $this->moduleDataSetup->startSetup();
 74 | 
 75 |         $connection = $this->moduleDataSetup->getConnection();
 76 |         $tableName = $this->moduleDataSetup->getTable('core_config_data');
 77 | 
 78 |         $query = $connection->select()
 79 |             ->from($tableName, ['config_id','value'])
 80 |             ->where(
 81 |                 'path = ?',
 82 |                 Config::XML_PATH_LAZY_BLOCKS
 83 |             )
 84 |             ->order('config_id ASC');
 85 | 
 86 |         $result = $connection->fetchAll($query);
 87 | 
 88 |         foreach ($result as $scope) {
 89 |             if (!isset($scope['config_id']) || !isset($scope['value'])) {
 90 |                 continue;
 91 |             }
 92 | 
 93 |             $blocks = $this->getBlocks($scope['value']);
 94 |             if (empty($blocks)) {
 95 |                 continue;
 96 |             }
 97 | 
 98 |             $jsonBlocks = $this->getJsonForBlocks($blocks);
 99 | 
100 |             try {
101 |                 $connection->update(
102 |                     $tableName,
103 |                     ['value' => $jsonBlocks],
104 |                     [
105 |                         'config_id = ?' => $scope['config_id']
106 |                     ]
107 |                 );
108 |             } catch (\Exception $e) {
109 |                 $this->logger->debug(__('Magefan LazyLoad ERROR: while converting to json for config_id: ') . $scope['config_id']);
110 |                 continue;
111 |             }
112 |         }
113 | 
114 |         $this->moduleDataSetup->endSetup();
115 |     }
116 | 
117 |     /**
118 |      * @param $block
119 |      * @return string
120 |      */
121 |     protected function getNumberHashForBlock ($block): string {
122 |         $numberHashFromString = sprintf('%u', crc32($block));
123 |         $numberHashFromStringSuffix = substr($numberHashFromString, -3);
124 | 
125 |         return '_' . $numberHashFromString . $numberHashFromStringSuffix . '_' . $numberHashFromStringSuffix;
126 |     }
127 | 
128 |     /**
129 |      * @param $blocks
130 |      * @return bool|string
131 |      */
132 |     protected function getJsonForBlocks($blocks)
133 |     {
134 |         $arrayBlocks = [];
135 |         foreach ($blocks as $block) {
136 |             $arrayBlocks[$this->getNumberHashForBlock($block)] =
137 |                 [
138 |                     'block_identifier' => $block,
139 |                     'first_images_to_skip' => ($block == 'category.products.list') ? '2' : '0'
140 |                 ];
141 |         }
142 | 
143 |         return $this->serializer->serialize($arrayBlocks);
144 |     }
145 | 
146 |     /**
147 |      * @return array|string[]
148 |      */
149 |     public static function getDependencies()
150 |     {
151 |         return [];
152 |     }
153 | 
154 |     /**
155 |      * @return array|string[]
156 |      */
157 |     public function getAliases()
158 |     {
159 |         return [];
160 |     }
161 | 
162 |     /**
163 |      * @param $blocks
164 |      * @return array
165 |      */
166 |     protected function getBlocks($blocks): array
167 |     {
168 |         json_decode($blocks);
169 |         if (json_last_error() === JSON_ERROR_NONE) {
170 |             return [];
171 |         }
172 | 
173 |         $blocks = str_replace(["\r\n", "\n\r", "\n"], "\r", $blocks);
174 |         $blocks = explode("\r", $blocks);
175 |         $result = [];
176 |         foreach ($blocks as $block) {
177 |             if ($block = trim($block)) {
178 |                 $result[] = $block;
179 |             }
180 |         }
181 | 
182 |         return $result;
183 |     }
184 | }
185 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "magefan/module-lazyload",
 3 |     "description": "Images lazyloading on Magento 2 store.",
 4 |     "require": {
 5 |         "magefan/module-community" : ">=2.2.2"
 6 |     },
 7 |     "suggest": {
 8 |         "magefan/module-webp": "Install WebP Optimized Images to serve images in the next-gen format. Use coupon code COMPOSER-FAN to get 10% discount on magefan.com.",
 9 |         "magefan/module-rocketjavascript": "Install Rocket JavaScript to optimize JS loading."
10 |     },
11 |     "type": "magento2-module",
12 |     "version": "2.1.6",
13 |     "authors": [
14 |         {
15 |             "name": "Magefan",
16 |             "email": "support@magefan.com"
17 |         }
18 |     ],
19 |     "autoload": {
20 |         "files": [
21 |             "registration.php"
22 |         ],
23 |         "psr-4": {
24 |             "Magefan\\LazyLoad\\": ""
25 |         }
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/etc/acl.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" ?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
11 | 	<acl>
12 | 		<resources>
13 | 			<resource id="Magento_Backend::admin">
14 | 				<resource id="Magento_Backend::stores">
15 | 					<resource id="Magento_Backend::stores_settings">
16 | 						<resource id="Magento_Config::config">
17 | 							<resource id="Magefan_LazyLoad::config_magefan_lazyload" title="Lazy Load"/>
18 | 						</resource>
19 | 					</resource>
20 | 				</resource>
21 | 			</resource>
22 | 		</resources>
23 | 	</acl>
24 | </config>
25 | 


--------------------------------------------------------------------------------
/etc/adminhtml/system.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" ?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
11 |     <system>
12 |         <section id="mflazyzoad" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10619842770" translate="label">
13 |             <label>Image Lazy Load</label>
14 |             <tab>magefan</tab>
15 |             <resource>Magefan_LazyLoad::config_magefan_lazyload</resource>
16 |             <group id="general" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label">
17 |                 <label>General</label>
18 |                 <attribute type="expanded">1</attribute>
19 |                 <field id="version" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
20 |                     <frontend_model>Magefan\LazyLoad\Block\Adminhtml\System\Config\Form\Info</frontend_model>
21 |                 </field>
22 |                 <field id="enabled" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="20" translate="label" type="select">
23 |                     <label>Enable Extension</label>
24 |                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
25 |                 </field>
26 |                 <field id="key" translate="label" type="text" sortOrder="25" showInDefault="1" showInWebsite="0" showInStore="0">
27 |                     <label>Product Key</label>
28 |                     <frontend_model>Magefan\Community\Block\Adminhtml\System\Config\Form\ProductKeyField</frontend_model>
29 |                 </field>
30 | 
31 |                 <field id="method" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="27" translate="label comment" type="select"  canRestore="1">
32 |                     <label>Method</label>
33 |                     <source_model>Magefan\LazyLoad\Model\Config\Source\Method</source_model>
34 |                 </field>
35 | 
36 |                 <field id="blocks_to_lazy_load" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="28" translate="label comment" type="select"  canRestore="1">
37 |                     <label>Blocks To Lazy Load</label>
38 |                     <source_model>Magefan\LazyLoad\Model\Config\Source\BlocksToLazyLoad</source_model>
39 | 
40 |                     <comment><![CDATA[
41 |                            <strong>If the "All" option is chosen:</strong><br/>
42 |                            Lazy Load will be added to all blocks. In the "Lazy Load Blocks" section you can skip a few images for some blocks to make them visible immediately.
43 |                            <br/>
44 |                            <strong>If the "Selected" option is chosen:</strong><br/>
45 |                            You need to specify the blocks in which images should be lazy-loaded. Here you can also skip the first few images.
46 |                         ]]></comment>
47 |                 </field>
48 | 
49 |                 <field id="lazy_blocks" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="30" translate="label" type="textarea" canRestore="1">
50 |                     <label>Lazy Load Blocks</label>
51 |                     <frontend_model>Magefan\LazyLoad\Block\Adminhtml\System\Config\Form\DynamicRow</frontend_model>
52 |                     <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
53 |                     <comment><![CDATA[
54 |                         Lazy load functionality will be automatically applied to images inside this blocks. You can use block name, block PHP class, or .phtml template name.<br/>
55 |                         <strong>Example:</strong><br/>
56 |                         block.name.in.layout<br/>
57 |                         \Vendor\ModuleName\Block\SomeBlock\Interceptor<br/>
58 |                         Vendor_ModuleName::folder/mytemplate.phtml<br/>
59 |                         folder/sometemplate.phtml
60 |                         ]]></comment>
61 |                 </field>
62 |                 <field id="noscript" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="40" translate="label comment" type="select" canRestore="1">
63 |                     <label>Include Noscript HTML Tag</label>
64 |                     <depends>
65 |                         <field id="method">0</field>
66 |                     </depends>
67 |                     <comment>The noscript HTML element defines a section of HTML that is inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. This option enables the display of images even when JavaScript is disabled in the browser and lazy load js script cannot be loaded. Note that when enabled it adds extra HTML tags to the page.</comment>
68 |                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
69 |                 </field>
70 |             </group>
71 |         </section>
72 |     </system>
73 | </config>
74 | 


--------------------------------------------------------------------------------
/etc/config.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
11 |     <default>
12 |         <mflazyzoad>
13 |             <general>
14 |                 <mfmodule>LazyLoad</mfmodule>
15 |                 <mftype>1</mftype>
16 |                 <method>0</method>
17 |                 <blocks_to_lazy_load>1</blocks_to_lazy_load>
18 |                 <lazy_blocks>
19 |                     {
20 |                         "_1686830676971_971":{"block_identifier":"footer","first_images_to_skip":"0"},
21 |                         "_1686830692627_627":{"block_identifier":"category.products.list","first_images_to_skip":"2"},
22 |                         "_1686830698763_763":{"block_identifier":"search_result_list","first_images_to_skip":"0"},
23 |                         "_1686830706539_539":{"block_identifier":"catalog.product.related","first_images_to_skip":"0"},
24 |                         "_1686830709731_731":{"block_identifier":"product.info.upsell","first_images_to_skip":"0"},
25 |                         "_1686830724821_821":{"block_identifier":"product.info.details","first_images_to_skip":"0"},
26 |                         "_1686830727491_491":{"block_identifier":"checkout.cart.crosssell","first_images_to_skip":"0"},
27 |                         "_1686830759755_755":{"block_identifier":"blog.post","first_images_to_skip":"0"},
28 |                         "_1686830764027_27":{"block_identifier":"blog.posts.list","first_images_to_skip":"0"},
29 |                         "_1686830775499_499":{"block_identifier":"blog.sidebar","first_images_to_skip":"0"},
30 |                         "_1686830777092_92":{"block_identifier":"blog.post.relatedproducts","first_images_to_skip":"0"},
31 |                         "_1686830777637_637":{"block_identifier":"product.info.description","first_images_to_skip":""}
32 |                     }
33 |                 </lazy_blocks>
34 |                 <noscript>0</noscript>
35 |             </general>
36 |         </mflazyzoad>
37 |     </default>
38 | </config>
39 | 


--------------------------------------------------------------------------------
/etc/di.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
11 |     <virtualType name="DefaultWYSIWYGValidator">
12 |         <arguments>
13 |             <argument name="allowedAttributes" xsi:type="array">
14 |                 <item name="mfdislazy" xsi:type="string">mfdislazy</item>
15 |             </argument>
16 |         </arguments>
17 |     </virtualType>
18 | </config>
19 | 


--------------------------------------------------------------------------------
/etc/frontend/di.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
11 |     <type name="Magento\Framework\View\Element\AbstractBlock">
12 |         <plugin name="magefan_lazyload_lock"
13 |                 type="Magefan\LazyLoad\Plugin\BlockPlugin" sortOrder="1000"/>
14 |     </type>
15 |     <type name="Magento\Cms\Block\Block">
16 |         <plugin name="magefan_lazyload_lock"
17 |                 type="Magefan\LazyLoad\Plugin\BlockPlugin" sortOrder="1000"/>
18 |     </type>
19 |     <!-- Integration with Amasty_PageSpeedOptimizer -->
20 |     <type name="Amasty\PageSpeedOptimizer\Model\Output\LazyLoadProcessor">
21 |         <plugin name="magefan_lazyLoad_plugin_amasty_pagespeedoptimizer_model_output_lazyloadprocessor_plugin"
22 |                 type="Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output\LazyLoadProcessorPlugin" sortOrder="1000"/>
23 |     </type>
24 | 
25 |     <type name="Amasty\PageSpeedTools\Model\Image\ReplacerComposite">
26 |         <plugin name="magefan_lazyLoad_plugin_amasty_imagege_replacer_composite_plugin"
27 |                 type="Magefan\LazyLoad\Plugin\Amasty\PageSpeedOptimizer\Model\Output\LazyLoadProcessorPlugin" sortOrder="10000"/>
28 |     </type>
29 | 
30 | 
31 |     <!-- Integration with Magefan_WebP -->
32 |     <type name="Magefan\WebP\Model\WebP">
33 |         <plugin name="magefan_lazyLoad_plugin_for_webp"
34 |                 type="Magefan\LazyLoad\Plugin\Magefan\WebP\Model\WebPPlugin" sortOrder="10000"/>
35 |     </type>
36 | 
37 |     <type name="Magefan\WebP\Api\HtmlParserInterface">
38 |         <plugin name="magefan_lazyLoad_plugin_for_webp"
39 |                 type="Magefan\LazyLoad\Plugin\Magefan\WebP\Api\HtmlParserInterfacePlugin" sortOrder="10000"/>
40 |     </type>
41 | 
42 | 
43 |     <type name="Magefan\LazyLoad\Plugin\BlockPlugin">
44 |         <arguments>
45 |             <argument name="skipBlocks" xsi:type="array">
46 |                 <item name="Magento\Catalog\Block\Product\Image\Interceptor" xsi:type="string">Magento\Catalog\Block\Product\Image\Interceptor</item>
47 |             </argument>
48 |         </arguments>
49 |     </type>
50 | 
51 |     <type name="Magento\PageBuilder\Model\Filter\Template">
52 |         <plugin disabled="false" name="move-mfdislazy-direct-after-img" sortOrder="10" type="Magefan\LazyLoad\Plugin\Magento\PageBuilder\Model\Filter\Template"/>
53 |     </type>
54 | </config>
55 | 


--------------------------------------------------------------------------------
/etc/frontend/events.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
11 |     <event name="layout_load_before">
12 |         <observer name="magefan_lazyload_layout_load_before" instance="Magefan\LazyLoad\Observer\LayoutLoadBeforeObserver" />
13 |     </event>
14 | </config>
15 | 


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" ?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
11 | 	<module name="Magefan_LazyLoad" setup_version="2.0.17">
12 | 		<sequence>
13 | 			<module name="Magefan_Community"/>
14 | 		</sequence>
15 | 	</module>
16 | </config>
17 | 


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 5 |  *
 6 |  * Glory to Ukraine! Glory to the heroes!
 7 |  */
 8 | 
 9 | declare(strict_types=1);
10 | 
11 | \Magento\Framework\Component\ComponentRegistrar::register(
12 |     \Magento\Framework\Component\ComponentRegistrar::MODULE,
13 |     'Magefan_LazyLoad',
14 |     __DIR__
15 | );
16 | 


--------------------------------------------------------------------------------
/view/adminhtml/pagebuilder/content_type/image.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
11 |     <type name="image">
12 |         <appearances>
13 |             <appearance name="full-width">
14 |                 <elements>
15 |                     <element name="desktop_image">
16 |                         <attribute name="exlude_from_lazy_load" source="mfdislazy"/>
17 |                     </element>
18 |                     <element name="mobile_image">
19 |                         <attribute name="exlude_from_lazy_load" source="mfdislazy"/>
20 |                     </element>
21 |                 </elements>
22 |             </appearance>
23 |         </appearances>
24 |     </type>
25 | </config>
26 | 


--------------------------------------------------------------------------------
/view/adminhtml/ui_component/pagebuilder_image_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
11 |     <fieldset name="general">
12 |         <field name="exlude_from_lazy_load" sortOrder="90">
13 |             <argument name="data" xsi:type="array">
14 |                 <item name="config" xsi:type="array">
15 |                     <item name="dataType" xsi:type="string">boolean</item>
16 |                     <item name="label" xsi:type="string" translate="true">Exlude From Lazy Load</item>
17 |                     <item name="formElement" xsi:type="string">checkbox</item>
18 |                     <item name="prefer" xsi:type="string">toggle</item>
19 |                     <item name="dataScope" xsi:type="string">exlude_from_lazy_load</item>
20 |                     <item name="valueMap" xsi:type="array">
21 |                         <item name="true" xsi:type="number">1</item>
22 |                         <item name="false" xsi:type="number">0</item>
23 |                     </item>
24 |                     <item name="default" xsi:type="number">0</item>
25 |                 </item>
26 |             </argument>
27 |         </field>
28 |     </fieldset>
29 | </form>
30 | 


--------------------------------------------------------------------------------
/view/frontend/layout/default.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
11 |     <body>
12 |         <referenceBlock name="after.body.start">
13 |             <block class="Magefan\LazyLoad\Block\Lazy" name="magefan.lazyload" template="Magefan_LazyLoad::lazy.phtml" >
14 |                 <arguments>
15 |                     <argument name="lazy_load_config" xsi:type="array">
16 |                         <item name="elements_selector" xsi:type="string">img,div</item>
17 |                         <item name="data_srcset" xsi:type="string">originalset</item>
18 |                     </argument>
19 |                 </arguments>
20 |             </block>
21 |         </referenceBlock>
22 |     </body>
23 | </page>
24 | 


--------------------------------------------------------------------------------
/view/frontend/layout/mflazyzoad_no_js.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
 5 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 6 |  *
 7 |  * Glory to Ukraine! Glory to the heroes!
 8 |  */
 9 | -->
10 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
11 |     <body>
12 |         <attribute name="class" value="mflazyzoad-no-js" />
13 |     </body>
14 | </page>
15 | 


--------------------------------------------------------------------------------
/view/frontend/templates/lazy.phtml:
--------------------------------------------------------------------------------
  1 | <?php
  2 | /**
  3 |  * Copyright © Magefan (support@magefan.com). All rights reserved.
  4 |  * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
  5 |  *
  6 |  * Glory to Ukraine! Glory to the heroes!
  7 |  */
  8 | ?>
  9 | <?php
 10 | /**
 11 |  * @var $block \Magefan\LazyLoad\Block\Lazy
 12 |  * @var $mfSecureRenderer \Magefan\Community\Api\SecureHtmlRendererInterface
 13 |  */
 14 | ?>
 15 | <?php if ($block->isNoScriptEnabled()) { ?>
 16 |     <style>
 17 |         .mflazyzoad-no-js [data-original],
 18 |         .mflazyzoad-no-js [data-originalset] {
 19 |             display: none!important;
 20 |         }
 21 |     </style>
 22 | <?php } ?>
 23 | <?php if ($block->getIsJavascriptLazyLoadMethod()) { ?>
 24 | <?php
 25 | $script = "
 26 |     window.mfLazyUtilLoad = setInterval(function() {
 27 |         if (window.scrollY > 100 || isMfLazyPixelImageInAViewPort(document.querySelector('main img[src$=\"pixel.jpg\"], main .mflazy-background-image, div[data-original]'))) {
 28 |             loadLazyLoad();
 29 |         }
 30 |     }, 10);
 31 | 
 32 |     document.addEventListener('DOMContentLoaded', function () {
 33 |         if (isMfLazyPixelImageInAViewPort(document.querySelector('main img[src$=\"pixel.jpg\"], main .mflazy-background-image, div[data-original]'))) {
 34 |             loadLazyLoad();
 35 |         } else {
 36 |             document.addEventListener('scroll', loadLazyLoad, { once: true });
 37 |             document.addEventListener('click', loadLazyLoad, { once: true });
 38 |         }
 39 |     });
 40 | 
 41 |     function isMfLazyPixelImageInAViewPort(element, offset = 100)
 42 |     {
 43 |         return element && ((element.getBoundingClientRect().top - offset) < window.innerHeight);
 44 |     }
 45 | 
 46 |     function loadLazyLoad() {
 47 |         clearInterval(window.mfLazyUtilLoad);
 48 |         " . ($block->isNoScriptEnabled() ? "
 49 |             document.body.className = document.body.className.replace('mflazyzoad-no-js', '');
 50 |         " : "") . "
 51 |         var jsSrc = '{$block->getViewFileUrl('Magefan_LazyLoad::js/lazyload.min.js')}';
 52 |         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)}
 53 |         loadScript(jsSrc, function(){
 54 |             var lazyLoadConfig = {$block->getLazyLoadConfig()};
 55 |             var myLazyLoad = false;
 56 |             if (document.readyState !== 'loading') {
 57 |                 myLazyLoad = new LazyLoad(lazyLoadConfig);
 58 |                 setTimeout(function(){
 59 |                     new LazyLoad(lazyLoadConfig);
 60 |                 }, 2000);
 61 |             } else {
 62 |                 document.addEventListener('DOMContentLoaded', function() {
 63 |                     myLazyLoad = new LazyLoad(lazyLoadConfig);
 64 |                     setTimeout(function(){
 65 |                         new LazyLoad(lazyLoadConfig);
 66 |                     }, 2000);
 67 |                 });
 68 |             }
 69 | 
 70 |             document.body.addEventListener('contentUpdated', function(){
 71 |                 if (myLazyLoad) {
 72 |                     myLazyLoad.update();
 73 |                 }
 74 |             });
 75 |             return true;
 76 |         });
 77 |     }
 78 | ";
 79 | ?>
 80 | <?= /* @noEscape */ $mfSecureRenderer->renderTag('script', ['data-rocketjavascript' => 'false'], $script, false) ?>
 81 | <?php
 82 | 
 83 | $script = "
 84 |     document.addEventListener('DOMContentLoaded', function() {
 85 |         function replacePixelImage(img) {
 86 |             if (!img.classList.contains('loaded')) {
 87 |                 var src = img.getAttribute('data-original');
 88 |                 if (src) {
 89 |                     img.setAttribute('src', src);
 90 |                     img.classList.add('loaded')
 91 |                 }
 92 |                 var srcset = img.getAttribute('data-originalset');
 93 |                 if (srcset) {
 94 |                     img.setAttribute('srcset', srcset);
 95 |                     img.classList.add('loaded')
 96 |                 }
 97 |             }
 98 |         }
 99 | 
100 |         /* Fix for product tabs */
101 |         var l = 'loaded';
102 |         var productInfoDetailedImg = document.querySelector('.product.info.detailed .data.item.title a');
103 |         if(productInfoDetailedImg){
104 |             productInfoDetailedImg.addEventListener('click', function () {
105 |                 document.querySelectorAll('.product.info.detailed img[data-original^=\"h\"],.product.info.detailed source[data-originalset^=\"h\"]').forEach(function(el){
106 |                     replacePixelImage(el);
107 |                 });
108 |             });
109 |         }
110 | 
111 |         document.querySelectorAll('.nav-sections, .navigation-bar').forEach(function(el){
112 |             el.addEventListener('click', handlerMouseEvent, false);
113 |             el.addEventListener('mouseenter', handlerMouseEvent, false);
114 |         });
115 | 
116 |         function handlerMouseEvent(e) {
117 |             e.target.querySelectorAll('img[data-original^=\"h\"],source[data-originalset^=\"h\"]').forEach(function (el) {
118 |                 replacePixelImage(el);
119 |             });
120 |         }
121 | 
122 | 
123 |         /* Fix for sliders */
124 |         var intr = setInterval(function(){
125 |             var sliders = document.querySelectorAll('.slick-track, .swiper-wrapper, .owl-carousel, .carousel-inner');
126 |             if (!sliders.length) clearInterval(intr);
127 |             sliders.forEach(function(el) {
128 |                 var imgs = el.querySelectorAll('img,source');
129 |                 var c = 0;
130 |                 imgs.forEach(function(el){
131 |                     if ((el.getAttribute('src') && el.getAttribute('src').indexOf('pixel.jpg') != -1)
132 |                         || (el.getAttribute('srcset') && el.getAttribute('srcset').indexOf('pixel.jpg') != -1)
133 |                     ) {
134 |                         c++;
135 |                     }
136 |                 });
137 |                 if (c && imgs.length != c) {
138 |                     imgs.forEach(function(el){
139 |                         var src = el.getAttribute('data-original');
140 |                         if (src) {
141 |                             el.setAttribute('src', src);
142 |                         }
143 | 
144 |                         var srcset = el.getAttribute('data-originalset');
145 |                         if (srcset) {
146 |                             el.setAttribute('srcset', srcset);
147 |                             el.classList.add(l)
148 |                         }
149 |                     });
150 |                 }
151 | 
152 |                 /* Fix for page builder bg in the slider */
153 |                 var mflazyBI = el.querySelectorAll('div.mflazy-background-image');
154 |                 var BI = el.querySelectorAll('div.background-image');
155 | 
156 |                 if (mflazyBI.length && BI.length) {
157 |                     mflazyBI.forEach(function(el) {
158 |                         el.className = el.className.replace(/mflazy-background-image/g, 'background-image');
159 |                     });
160 |                 }
161 | 
162 |             });
163 |         }, 2000);
164 |     });
165 | ";
166 | ?>
167 | <?= /* @noEscape */ $mfSecureRenderer->renderTag('script', [], $script, false) ?>
168 | <?php } ?>
169 | 
170 | <style>
171 |     .slick-slide:not(.slick-active) .background-image {display: none;}
172 | </style>
173 | 


--------------------------------------------------------------------------------
/view/frontend/web/images/pixel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/magefan/module-lazyload/f0d4a1a2890ed89fecd034fbc569ada7763e1d42/view/frontend/web/images/pixel.jpg


--------------------------------------------------------------------------------
/view/frontend/web/js/lazyload.min.js:
--------------------------------------------------------------------------------
 1 | /* Origin https://github.com/verlok/vanilla-lazyload/blob/8.0.0/dist/lazyload.min.js */
 2 | var _extends=Object.assign||function(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];for(var d in c)Object.prototype.hasOwnProperty.call(c,d)&&(a[d]=c[d])}return a},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};!function(a,b){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=b():/*"function"==typeof define&&define.amd?define(b):*/a.LazyLoad=b()}(this,function(){"use strict";var a={elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"original",data_srcset:"originalSet",class_loading:"mf-loading",class_loaded:"mf-loaded",class_error:"mf-error",class_initial:"mf-initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},b=!("onscroll"in window)||/glebot/.test(navigator.userAgent),c=function(a,b){a&&a(b)},d=function(a){return a.getBoundingClientRect().top+window.pageYOffset-a.ownerDocument.documentElement.clientTop},e=function(a,b,c){return(b===window?window.innerHeight+window.pageYOffset:d(b)+b.offsetHeight)<=d(a)-c},f=function(a){return a.getBoundingClientRect().left+window.pageXOffset-a.ownerDocument.documentElement.clientLeft},g=function(a,b,c){var d=window.innerWidth;return(b===window?d+window.pageXOffset:f(b)+d)<=f(a)-c},h=function(a,b,c){return(b===window?window.pageYOffset:d(b))>=d(a)+c+a.offsetHeight},i=function(a,b,c){return(b===window?window.pageXOffset:f(b))>=f(a)+c+a.offsetWidth},j=function(a,b,c){return!(e(a,b,c)||h(a,b,c)||g(a,b,c)||i(a,b,c))},k=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},l=function(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d<c.children.length;d++){var e=c.children[d];if("SOURCE"===e.tagName){var f=e.dataset[b];f&&e.setAttribute("srcset",f)}}},m=function(a,b,c){var d=a.tagName,e=a.dataset[c];if("IMG"===d){l(a,b);var f=a.dataset[b];return f&&a.setAttribute("srcset",f),void(e&&a.setAttribute("src",e))}if("IFRAME"===d)return void(e&&a.setAttribute("src",e));
 3 |     if (e&&window.MagefanWebP&&window.MagefanWebP.canUseWebP()&&!e.includes('mf_webp')){e=window.MagefanWebP.getWebUrl(e);}
 4 |     if (e) {
 5 |         e = e.replace('"', '\\"').replace('\'', '\\\'');
 6 |         a.style.backgroundImage="url('"+e+"')";
 7 |     };
 8 |     if (a.className && a.className.indexOf('mflazy-background-image-')) {
 9 |         a.className = a.className.replace(/mflazy-background-image-/g, 'background-image-');
10 |         a.className = a.className.replace(/mflazy-background-image/g, 'background-image');
11 |     }
12 | },n=function(b){this._settings=_extends({},a,b),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};n.prototype={_reveal:function(a){var b=this._settings,d=function d(){b&&(a.removeEventListener("load",e),a.removeEventListener("error",d),a.classList.remove(b.class_loading),a.classList.add(b.class_error),c(b.callback_error,a))},e=function e(){b&&(a.classList.remove(b.class_loading),a.classList.add(b.class_loaded),a.removeEventListener("load",e),a.removeEventListener("error",d),c(b.callback_load,a))};"IMG"!==a.tagName&&"IFRAME"!==a.tagName||(a.addEventListener("load",e),a.addEventListener("error",d),a.classList.add(b.class_loading)),m(a,b.data_srcset,b.data_src),c(b.callback_set,a)},_loopThroughElements:function(){var a=this._settings,d=this._elements,e=d?d.length:0,f=void 0,g=[],h=this._isFirstLoop;for(f=0;f<e;f++){var i=d[f];a.skip_invisible&&null===i.offsetParent||(b||j(i,a.container,a.threshold))&&(h&&i.classList.add(a.class_initial),this._reveal(i),g.push(f),i.dataset.wasProcessed=!0)}for(;g.length>0;)d.splice(g.pop(),1),c(a.callback_processed,d.length);0===e&&this._stopScrollHandler(),h&&(this._isFirstLoop=!1)},_purgeElements:function(){var a=this._elements,b=a.length,c=void 0,d=[];for(c=0;c<b;c++){a[c].dataset.wasProcessed&&d.push(c)}for(;d.length>0;)a.splice(d.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this,b=this._settings.throttle;0!==b?function(){var c=function(){(new Date).getTime()},d=c(),e=b-(d-a._previousLoopTime);e<=0||e>b?(a._loopTimeout&&(clearTimeout(a._loopTimeout),a._loopTimeout=null),a._previousLoopTime=d,a._loopThroughElements()):a._loopTimeout||(a._loopTimeout=setTimeout(function(){this._previousLoopTime=c(),this._loopTimeout=null,this._loopThroughElements()}.bind(a),e))}():this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var o=window.lazyLoadOptions;return o&&function(a,b){var c=b.length;if(c)for(var d=0;d<c;d++)k(a,b[d]);else k(a,b)}(n,o),n});
13 | 


--------------------------------------------------------------------------------