When you request a website, your browser loads all the required resources to display the page as desired. This means that all objects are requested, even those that are not visible to the user (i.e. objects that are “below the fold”). This results in unnecessarily long load times. To get around this issue, developers use lazy loading. Using a script such as LazyLoad, the browser only loads images and other data when they are in the viewport (i.e. the visible area), such as when scrolling or enlarging the browser window.
The lazy loading method can be best explained by using the example of image objects. To be able to use lazy loading, you have to modify the markup of the img tag. In place of the src attribute, this method uses a data attribute that includes the corresponding source link. As soon as the image is visible, the script adds the src attribute using the data attribute which makes the image appear. You can even use fade-in or slide-in effects to make the loading process more aesthetically pleasing.