Lazy Load script delays loading of images in web pages. This is especially useful if you have a lot of images on pages and if pages are long with a lot of content. It makes the page load faster, reduces server load, and saves bandwidth.
Lazy Loading of Images (in Articles or Content Modules)
The framework we are using for our Joomla templates has an integrated solution for lazy loading of the images. You can enable it very easily. From your Joomla administrator's panel, go to Extensions > Templates > Template name > Features > Lazy Load and enable it. As you can see there, the HTML code for your images must be specific to postpone loading. The usual HTML code of an image is:
To enable lazy loading of this image, HTML code for this image should be:
As you can see there's no "src" value and it's changed with "data-original" value.
Lazy Loading in Responsive Lightbox Module
To enable lazy loading of the image thumbnails in Responsive Lightbox module, you need to modify the module code a little bit. We'll show you how.
Using your favorite code editor, edit file /modules/mod_hot_responsive_lightbox/tmpl/default.php and change this line:
echo '
to this:
echo '
and also change this line:
echo '
to this:
echo '
After you make this changes, using FTP upload updated default.php file to this folder /modules/mod_hot_responsive_lightbox/tmpl (overwrite original file). Make sure the Lazy Load option is enabled in the template parameters, otherwise, the Responsive Lightbox module will show no thumbnails.