Adding Lazy Load to Images with HTML5

Comments (0)

Views (209)

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 ?

When you are stuck while you are coding or when you need to relax yourself comment section is waiting for you. Ask what you don't know, answer what you know !

Adding Lazy Load to Images with HTML5

Comments

Popular Articles

Popular Tags