Adding Lazy Load to Images with HTML5

New experimental APIs are added daily along with HTML5. These added APIs are usually experimental and tested by us, as I said, at the end of the day, the good one wins and the possibility of being added to new versions increases. The only downside to being experimental is that not all browsers support it. However, this cannot prevent us from getting excited about new developments ?

Because in the past, we had to use javascript plugins to lazy load images. The purpose of this was so that the images do not affect the opening speed of the page. However, there is currently a native solution that only works in Chrome and Opera.

All you have to do is add a loading attribute to the <img> tag.

<img src="test.png" loading="lazy">

You can also test whether it works with the onload event.

<img src="test.png" loading="lazy" onload="alert('Loaded..')">

When the image becomes visible when scrolling down, it is downloaded and rendered. In this way, images that do not appear on the page do not become a burden for nothing.

Don't forget to test it from Chrome or Safari to see the live example ?


There are no comments, make the firs comment