landofcoder / module-lazyload
A Magento 2 module that adds support for lazy loading of images.
Installs: 836
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Type:magento2-module
Requires
- magento/module-catalog: ^102.0 || ^103.0 || ^104.0
This package is auto-updated.
Last update: 2024-11-05 14:35:59 UTC
README
Overview
A Magento 2 module that adds support for lazy loading of images.
Features
- Utilises the lazysizes script to add lazy load support for images
- Lazy loading is automatically applied to all* product images
- *Any image created via
Magento\Catalog\Block\Product\Image
- This includes:
- Product listing (category, search, product list widget)
- Product relations (related, upsell, crosssell)
- Product comparison
- Recently viewed
- Cart thumbnails
- Wishlist
- *Any image created via
- Support can be added to any further images by adding the following to
<img>
elements:- Add
lazyload
class - Change the
src
attribute todata-src
- Optional: add a dummy
src
with transparent 1px x 1px image to avoid broken image links prior to lazy load (see product image templates as example)
- Add
- Preloading
- Preloading means the media source will be loaded even if not in the viewport such as megamenu icons/images.
- The
preload_elements
layout argument allows you to specify selectors of which elements can be preloaded. This can be configured per page. - Use the
lazypreload
class on element(s) you wish to preload.
Compatibility
- Magento Community Edition / Enterprise Edition 2.2.x (see older releases for 2.0 / 2.1 support)
- Supports Magento 2 Full Page Cache (including Varnish)
Installation
composer require landofcoder/module-lazyload
php bin/magento module:enable Lof_Lazyload
php bin/magento setup:upgrade
Contributing
Issues, forks and pull requests welcomed :)