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.
The solution to this challenge will be released on Monday.
As a performance improvement technique, lazy loading involves the loading of only images whose placeholders come into view.
Post the solution in the comment section of this post.
A larger image is specified using the
On completion of this challenge, you should be able to:
Implement lazy loading on a page to reduce its load time and improve performance.
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 thats sheer performant development in action!
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.
Fork this base codepen to get started
Post it on Twitter using the scotchchallenge and we will be sure to see it.
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.
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.
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.
Hint: The code from this previous challenge could be helpful.
If on the completion of this challenge you wish to showcase your work or receive a review, kindly
attribute but isnt displayed until its placeholder comes in view.
The overall size of the page reduces drastically and the page loads several times faster.
Understand DOM element manipulation using JavaScript.
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.
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.