On the 12th of February a successfully merge has happened for the following lazy loading spec:
This spec changes to support a lazyload attribute in iframe and img elements.
Why should we use it?
Many of the images that we write in HTML are often off-screen. Often these images are loaded while the user never sees them. This slows our website down unnecessarily.
How to use it
Today we no longer need any library, we can simply use the built-in loading attribute:
<img loading="lazy" />
Good to know, not specifying the attribute at all will have the same impact as setting loading=auto
.
When the image loads is all up to the browser. A browser will detect when the user scrolls near the image, which is awesome!
A more detailed post can be found here:
A link to the merge can be found here, Go show some love!
Enjoy!