HTML loading Attribute

The HTML loading attribute provides a hint that tells the browser whether an image, iframe, audio resource, or video resource should be loaded immediately or may be deferred until it is closer to the viewport.

Elements That Use the loading Attribute

The loading attribute can be used with the <img>, <iframe>, <audio>, and <video> elements.

Element	Description
`<img>`	Controls whether an image should load eagerly or may be deferred.
`<iframe>`	Controls whether the embedded document should load eagerly or may be deferred.
`<audio>`	Controls whether loading an audio resource outside the viewport may be deferred.
`<video>`	Controls whether loading a video resource outside the viewport may be deferred.

loading Values

The loading attribute is an enumerated attribute with two keywords: eager and lazy.

Value	Description
`eager`	Tells the browser to load the resource immediately.
`lazy`	Allows the browser to defer loading the resource until conditions indicate that it is needed, such as when it approaches the viewport.

If the loading attribute is omitted or contains an invalid value, its state is eager.

Lazy Loading

Lazy loading can reduce the amount of data that must be downloaded when a page first loads. Resources that are outside the visible portion of the page can be deferred until the browser determines that they are needed.

<img src="/img/images/image-900x600.png" alt="Example image" width="900" height="600" loading="lazy">

The browser determines exactly when a lazily loaded resource is fetched. The lazy value is therefore a loading policy rather than an instruction to wait until the resource actually enters the viewport.

Using loading with Images

Lazy loading is particularly useful for images located farther down a page. Images that are not initially visible can be deferred, reducing unnecessary network activity during the initial page load.

<img src="/img/images/image-600x400.png" alt="Example image" width="600" height="400" loading="lazy">

Including the image's width and height attributes allows the browser to reserve space before the image loads, helping reduce layout shifts.

Using loading with Iframes

The loading="lazy" value can defer loading an <iframe> that is outside the viewport. This can be useful for embedded content that users may never scroll far enough to view.

<iframe src="example.html" title="Example Content" width="600" height="400" loading="lazy"></iframe>

Because an iframe can require its own document, scripts, styles, images, and other resources, deferring an offscreen iframe can reduce the work required during the initial page load.

Using loading with Audio and Video

The loading attribute also applies to the <audio> and <video> elements. When loading="lazy" is used, loading media resources outside the viewport can be deferred.

<video src="video.mp4" controls loading="lazy"></video>

For audio and video, loading="lazy" takes precedence over the preload attribute by deferring data fetching. Browser support for lazy loading media is newer and more limited than support for images and iframes.

Performance Considerations

Lazy loading is most useful for resources that begin outside the viewport. Resources needed immediately should generally not be lazy loaded because delaying them can make important page content appear more slowly.

For example, an important image displayed near the top of a page will usually be better left eager rather than marked loading="lazy". Images and embedded content farther down the page are stronger candidates for lazy loading.

Common Mistakes

Do not add loading="lazy" automatically to every resource. Content needed immediately can be delayed unnecessarily when lazy loading is used indiscriminately.

Do not rely on lazy loading as a substitute for properly optimized images and media. File size, image dimensions, responsive images, compression, and appropriate media formats remain important.

Do not omit image dimensions simply because an image is lazy loaded. Supplying width and height helps the browser reserve the correct amount of space before the image appears.

Do not assume lazy loading for <audio> and <video> currently has the same browser support as lazy loading for <img> and <iframe>.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The loading attribute is widely supported for established uses such as lazy loading images and iframes. Compatibility for newer uses can differ by element.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the loading Attribute

The example places a lazy-loaded image farther down the page. Scroll through the example to reach the image.

Play in Editor

Summary

The HTML loading attribute controls whether supported resources load eagerly or may be deferred until they are needed. The eager value loads a resource immediately, while lazy allows the browser to delay loading an offscreen resource. Lazy loading can improve initial page performance when it is used appropriately for images, iframes, audio, and video that are not immediately needed.