This content originally appeared on DEV Community and was authored by DEV Community
Alright, lets get our JavaScript coding fingers ready for we are going to make the most awesomest image lazy loading!
<img
alt="A giraffe eating fallback code solutions"
src="giraffe.jpg"
height="500"
width="1000"
loading="lazy"
/>
Wait, what?
Yes, HTML is enough to perfectly solve this issue. Safari 15.4 now ships with lazy loading support. It was the last browser we waited for to catch up.
You no longer never need to do any JavaScript or CSS trickery related to typical image content loading.
But what about my fade in animation!
Don't do it. You should use a progressive image. The thing with progressive image is that once browser receives any image data it is able to start rendering at least something visual.
If you do image animation such as a fade in transition you are making a mistake. Without adding in lots of complex code you can only trigger a fade in transition once the entire image file is done loading. On slow connection this means the image will display, well, probably way after user has scrolled past the image.
This is an unnecessary cost only for having a "cool fade in animation that I like and it fits the design".
I want at least a fallback color!!
Don't do that either. If you're using a progressive image then the time a browser might show the "ugly alt text" is greatly reduced. Automating a fallback background color is not worth the extra code or complexity. Besides it can get in the way with alpha transparency images anyway.
Conclusion
Embrace the simpliness that you now have and put your mind into other things.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-15T17:52:49+00:00) The perfect image lazy loading. Retrieved from https://www.scien.cx/2022/03/15/the-perfect-image-lazy-loading/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.