The component selectively replaces src with a placeholder (on the server side) before sending the html to the frontend, and after the page is loaded, the images are automatically loaded using js depending on the scroll position.

Features

• Optimization of page load speed
• Improvement of percentage in Google PageSpeed Insights

Quick Start

1. Install the component
2. Specify the selectors for classes with images or containers with images in the system setting lazyload_selectors(any number of selectors separated by commas)

For containers: #products img or .lists_products img

<ul id="products" class="lists_products clearfix"> <li><img src="image/car.jpg" alt="" ></li> </ul>

For images: .products_img

<ul class="clearfix"> <li><img class="products_img" src="image/car.jpg" alt="" ></li> </ul>

Image Indexing

Images will be indexed as before, since search engines first check data-src, if it has a value, the search engine will not pay attention to the src attribute.

Images are downloaded from links in the src attribute of the img tag, as well as the data-src and data-original attributes (in this case, the presence of a link to the image in the src attribute is not required).

https://yandex.ru/support/images/indexing.html

Layout Issues

If your layout is broken after enabling the component, it means that your html is not valid. You need to check your templates and chunks.
HTML validation service: validator.w3.org/nu/?doc=https://site.ru

Event

Just in case, the component has added the LazyLoadBeforePagePrerender event, which triggers after processing the html page.

// Example of replacing a special character <?php /* @var array $scriptProperties */ switch ($modx->event->name) { case 'LazyLoadBeforePagePrerender': $output = $scriptProperties['output']; $output = str_ireplace('%7C', '|' , $output); $modx->event->returnedValues = array('output' => $output); break; }

For the slick library

Since the library creates clones of elements, the component may not always load images. To solve this problem, you need to add data-lazy="{$image}" to img.

<img class="lazyload_img" data-lazy="{$image}" src="{$image}" data-src="{$image}">