Categories
HTML

How to load images dynamically or lazily when users scrolls them into view with HTML?

Spread the love

Sometimes, we want to load images dynamically or lazily when users scrolls them into view with HTML.

In this article, we’ll look at how to load images dynamically or lazily when users scrolls them into view with HTML.

How to load images dynamically or lazily when users scrolls them into view with HTML?

To load images dynamically or lazily when users scrolls them into view with HTML, we can set the loading attribute to lazy.

For instance, we write

<img src="http://placeimg.com/640/360/any" loading="lazy" />

to set the loading attribute to lazy.

Then the image will be loaded only when it’s visible.

Conclusion

To load images dynamically or lazily when users scrolls them into view with HTML, we can set the loading attribute to lazy.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *