Placeholder images with smaller dimensions and size are stretched to fit the image size.

A larger image is specified using the data-src attribute but isn’t displayed until its placeholder comes in view.

The overall size of the page reduces drastically and the page loads several times faster.

From the image above you can also see the individual download of the now visible images in the network tab of the Google Chrome Dev Tools. Now that’s sheer performant development in action!

Requirement

Feel free to complete this challenge using any tool, technique, or technology. However, there is a single requirement for the challenge which is, once the application loads, we require only the images in the viewport to load, while the rest of the images not currently in the viewport loads upon entering the viewport.

Goals for this Challenge

On completion of this challenge, you should be able to:

Implement lazy loading on a page to reduce its load time and improve performance.

Understand DOM element manipulation using JavaScript.

Bonus

While you are at liberty to complete this challenge with any framework or tool, a bonus will be to animate the transition from the placeholder to the main image.

Resources

To start off quickly with the challenge, a base codepen containing HTML and CSS with Bulma classes for styling has been provided. The base pen consists of the overall layout of the app and images stored in a CDN. Use this to quickly implement the lazy loading feature. These awesome images used for this demo were sourced from Buzzfeed.