In a bid to lower the load times of a website, several techniques have been developed. One such technique is the lazy loading of images on the page.
TL, DR
As seen above, in this challenge we shall be lazy loading the images on the page. When the page is loaded, only the image placeholders which appear completely in the viewport are fetched.
Hint: The code from this previous challenge could be helpful.
The Challenge
As a performance improvement technique, lazy loading involves the loading of only images whose placeholders come into view.
Implement this lazy loading feature on the provided page containing quite funny animal memes.
- Placeholder images with smaller dimensions and size are stretched to fit the image size.
- A larger image is specified using the
data-srcattribute 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.
Fork this base codepen to get started
Community
If on the completion of this challenge you wish to showcase your work or receive a review, kindly
- Post the solution in the comment section of this post.
- Post it on Twitter using the #scotchchallenge and we will be sure to see it.
- Join the #codechallenge channel of the Scotch Slack group to interact with others and receive reviews on your submission.
Also, leave your comments, feedback or suggestions in the comment section of this post.
Solution
The solution to this challenge will be released on Thursday. Happy coding!!
Source: Scotch