How to create lazy loading product images in Magento 2
Hello, My name is Cuong, I’m a Magento Developer, Welcome back to my Magento 2 tutorial video series.
#Magento2Tutorial, #Magento2Training #Magento2Videos
Today, I am going to show everybody the best practice, How to create lazy loading product images in Magento 2.
Before doing this practice, we need to learn What is the mean of lazy loading images?
Lazy loading images mean loading images on websites asynchronously, images will only appear when users view it in the browser’s viewport. This means that if users don’t scroll down, images placed at the bottom of the page won’t even be loaded. Follow this way users don’t have to load all images of a website so it won’t waste time, memory and bandwidth.
We have the scenario: We will integrate a jQuery plugin for lazy loading images into a custom module in Magento 2, that allowing us lazy loading product images on the homepage, catalog category page. This is the places show the most products.
By default, Magento 2 loads all product images of the page.
So what will we do in this practice?
1. We will create a new module called PHPCuong_LazyLoadingImage
2. We will create a new Jquery Widget called lazyLoadingImage from an available library.
3. We will use the preference to override the class named MagentoCatalogBlockProductImageBuilder to change the default product image template of Magento 2.
This is the method we will override it and change these templates.
Okie, let’s go.
Let’s complete this practice, you need to follow steps by step:
Step 1: Declaring the new module called PHPCuong_LazyLoadingImage
– Create the namespace PHPCuong in the path appcode
– Create the module named LazyLoadingImage in the path appcodePHPCuong
– Create the file named registration.php in the path appcodePHPCuongLazyLoadingImage
– Create the file named module.xml in the path appcodePHPCuongLazyLoadingImageetc
End of step #1, I have been completed the codes to create the new module called PHPCuong_LazyLoadingImage.
Step 2: Declaring the new Jquery Widget called lazyLoadingImage
– Create the new file named lazy-loading-image.js appcodePHPCuongLazyLoadingImageviewfrontendwebjs
– Create the new file named _module.less in the path appcodePHPCuongLazyLoadingImageviewfrontendwebcss
– Create the new file named Loader.gif in the path appcodePHPCuongLazyLoadingImageviewfrontendwebimages
Go to the link for getting a loading image.
Step 3: Overriding the class named MagentoCatalogBlockProductImageBuilder by using preference
– Create the new file named di.xml in the path appcodePHPCuongLazyLoadingImageetcfrontend
– Create the new file named ImageBuilder.php in the path appcodePHPCuongLazyLoadingImageOverrideCatalogBlockProduct
We will copy the content from the default file.
– Create the new file named image.phtml in the path appcodePHPCuongLazyLoadingImageviewfrontendtemplatesproduct
– Create the new file named image_with_borders.phtml in the path appcodePHPCuongLazyLoadingImageviewfrontendtemplatesproduct
– Create the new file named default.xml in the path appcodePHPCuongLazyLoadingImageviewfrontendlayout
This file helps us to display the lazyloadimage template on the footer of all the pages on the storefront.
– Create the new file named lazyloadingimage.phtml in the path appcodePHPCuongLazyLoadingImageviewfrontendtemplates
Step 4: Test and see the results
1. Run the following command lines:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
2. Test the results
Go to the homepage, catalog category on the storefront.
Yeah, It works perfectly.
So what did you get after completing this practice?
1. You known how to create a new module in magento 2.
2. You known how to override a class by using preference in magento 2.
3. You known how to create a jquery widget in magento 2.
Thanks for watching guide. If you have any questions about this practice, please feel free to leave a comment below.
Don’t forget to like, comment, share my videos and subscribe to my channel for getting the latest lessons.
Please do not hesitate to contact me, if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.
Get the source codes of this tutorial in the Github