An Interest In:
Web News this Week
- March 13, 2024
- March 12, 2024
- March 11, 2024
- March 10, 2024
- March 9, 2024
- March 8, 2024
- March 7, 2024
Lazy Load Images in 2 seconds
The Story
I have this internal tool for some purpose. Now, this has a page where it displays like 50+ images grid in smaller sizes.
The page always load very slow and I hated it.
So We can solve this by properly generating smaller thumbnails of the images and/or lazy loading the images.
This isn't really isn't used by anyone else other than me. So I decided to skip the thumbnail part and add 2 lines of js to lazy load the hack out of these stupid images.
Then I stumbled upon something I completely forgot that existed.
loading="lazy"
<img src="..." loading="lazy" />
That's pretty much everything you need to make your images lazy load.
Now this is an HTML5 Feature and probably might not be supported by every browser out there.
It might not bring fancy animations and fade transitions onto the table
But IT WORKS!!
The previous webpage is atleast 3 times as fast.
Read more here: MDN
TL;DR
Use the loading
attribute in HTML
<img src="..." loading="lazy" />
Original Link: https://dev.to/geongeorge/lazy-load-all-images-in-2-seconds-2ppf
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To