Native image lazy-loading is now part of the HTML Standard

Sami C.
1 min readFeb 21, 2020

--

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.

Simple feature detection script

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!

--

--

Sami C.
Sami C.

Written by Sami C.

Freelance Software Engineer

No responses yet