Lazy Loading Images in Javascript example

Lazy loading is a technique that loads elements such as images when necessary, that is, on a web page images that are not visible on the screen will not be loaded until they are visible.

In the following javascript example, only two images are loaded since they have the src attribute inside the img tag. The rest of the images with the "lazy" class will be loaded when the div element that contains them is scrolled, setting the data-src attribute of the images with the "lazy" class in the "src" attribute, thus allowing their loading.