Joomla 3.x. How to disable Lazy Load effect

This tutorial will show you the way to remove lazy load effect in Joomla 3.x templates.

Lazy Load effect delays loading of images in long web pages. Images outside of viewport are not loaded untill user scrolls to them.

Let’s see how to remove this effect:

1. Access your server using any ftp client or FileManager provided by your host.

2. Navigate to /templates/themeXXXX/css/ directory. Where XXXX is the number of your theme.

3. Open ‘template.css’ file for editing. Make sure to back up original file before editing:

   

4. Remove the following style rules with appropriate style declarations:

   .item__module,
   .item
   { opacity: 0;    
   -webkit-transition: all 0.8s ease;    
   -moz-transition: all 0.8s ease;    
   -o-transition: all 0.8s ease;    
   transition: all 0.8s ease;    
   transform: translateY(-30px);    
   -o-transform: translateY(-30px);    
   -moz-transform: translateY(-30px);    
   -webkit-transform: translateY(-30px);
   -ms-transform: translateY(-30px);  }
   
   .item__module.visible-first,
   .item.visible-first 
   { opacity: 1;
   transform: translateY(0px);
   -o-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -webkit-transform: translateY(0px);
   -ms-transform: translateY(0px);  } 

5. Note that rule declarations may differ in your template (depends on the template design):

   

6. Refresh browser cache to see the changes.

7. Lazy Load effect has been successfully removed from your website. Images outside of viewport are now loaded from the very beginning.

In case you work with .LESS files, follow the steps below:

1. Access your server using any ftp client or FileManager provided by your host.

2. Navigate to /templates/themeXXXX/less/ directory. Where XXXX is the number of your theme.

3. Open ‘template.less’ file for editing. Make sure to backup original file before editing:

   

4. Remove the following style rules with appropriate style declarations:

   .item__module,
   .item {
   opacity: 0;
   .transition(all 0.8s ease);
   .transform(translateY(-30px));
   &.visible-first
   { opacity: 1; .transform(translateY(0px)); }
   }

5. Note that rule declarations may differ in your template (depends on the template design):

   

6. Refresh browser cache to see the changes.

7. Lazy Load effect has been successfully removed from your website. Images outside of viewport are now loaded from the very beginning.

Feel free to check the detailed video tutorial below: