Skip to main content

Native HTML lazyload in React

Psst: we are hiring remote frontend developers and backend developers.

Illustration of a person holding a laptop and a person holding a picture of cat

Lazy loading is a great concept that is awesome for frontend performance. In essence, it enables us to defer loading of assets until they are needed. Users of your React ecommerce love it since it enables you to gracefully load the content of your Product Information Management without overloading the end user with data they don’t need right away.

Native HTML lazy loading

The ability to do native lazy loading in HTML has not been supported by the language. Web developers are used to do something in the lines of this:

<img data-src=”image.webp” />

Where the data-src attribute will be changed to the src attribute once the image is close to the viewers attention. WhatWG are now working on a spec that will change all this.

The loading attribute

The proposal looks like this: as soon as there is a “loading” attribute present on an image (or iframe), the browser takes this into consideration for when it decides to download the asset.

You can (soon) do the following:

<img src=”image.webp” loading=”lazy” />

Image will be loaded when the browser see it fit

<img src=”image.webp” loading=”eager” />

Image will be loaded as soon as possible

This means that as soon as this lands in evergreen browsers, we no no longer have to ship JS to handle lazy load. The browser will do all of the heavy lifting for us! For further details and how to use this feature today (with polyfills and all), check out this excellent blog post from Addy Osmani