Loading Lazy: Browser Support, Syntax, Limitations

What is the loading=lazy attribute?

loading=lazy is a value of the HTML loading attribute, defined in the WHATWG HTML Standard for img and iframe elements. It tells the browser to defer the network fetch until the element is within a calculated distance of the viewport. The other accepted value is eager, which is the browser default.

Which browsers does loading=lazy support?

Every modern desktop and mobile browser supports loading=lazy by default on img elements, and recent versions add the same support for iframes. Internet Explorer and the legacy Android Browser never shipped support.

What is the syntax of the loading attribute?

The loading attribute lives directly on img and iframe elements and accepts two keyword values. It pairs cleanly with the width, height, and decoding attributes that browsers use to reserve layout space and pick a decode strategy.

• loading=lazy: Defers the fetch of the img or iframe until the element is within a calculated distance of the viewport. Use it on every below-the-fold image, every embedded YouTube or map iframe, and any decorative image that the user may never scroll to.
• loading=eager: Loads the resource immediately during the initial parse. This is the default when no loading attribute is set, and the right value for the LCP image, the logo, and any image that the user sees in the first viewport.
• Pair with width and height: Always set width and height (or an aspect-ratio) on a lazy-loaded img so the browser reserves layout space before the fetch. A missing dimension causes Cumulative Layout Shift when the deferred image arrives.
• Combine with fetchpriority: The fetchpriority attribute (high, low, auto) tunes the priority of the fetch independently of loading. fetchpriority=high on a lazy image lifts the request once it does fire, which is useful inside a carousel that the user is about to swipe.
• Works on iframe too: Add loading=lazy to a third-party embed (a YouTube player, a Google Map, a Twitter widget) so the browser does not pull megabytes of script and stylesheets before the user scrolls to the embed.

How does loading=lazy work?

When the browser parses an img or iframe with loading=lazy, it skips the immediate network fetch and queues the element for an internal IntersectionObserver. The fetch fires only once the element comes within the viewport threshold, at which point the browser drops the attribute hint and treats the request as a normal eager load.

• Viewport thresholds in Chrome and Edge: Chrome and Chromium-based Edge use a 1250-pixel threshold on fast 4G connections and a 2500-pixel threshold on 3G or slower, measured from the current scroll position to the element. Firefox and Safari use slightly smaller thresholds tuned to their own paint pipelines.
• Layout reservation: The browser still parses the img or iframe and reserves the box from the width and height attributes (or the CSS aspect-ratio). The placeholder lives in the layout from the first paint, and the bytes only arrive when the user scrolls close.
• Triggers the same load event: Once the fetch fires and the resource decodes, the img or iframe dispatches the standard load event the same way an eager image does. JavaScript that listens on load keeps working without changes.
• Independent of IntersectionObserver: The browser-level threshold runs in the engine, not on the page. You do not need to wire up your own IntersectionObserver, and the engine threshold runs even when JavaScript is disabled.

How do you check if a browser supports loading=lazy?

Run the property check loading in HTMLImageElement.prototype in JavaScript. The expression returns true on every browser that supports loading=lazy on img, and false on browsers that need a polyfill.

// Detect native loading="lazy" support before you upgrade your image markup
if ('loading' in HTMLImageElement.prototype) {
  document.querySelectorAll('img[data-lazy-src]').forEach((img) => {
    img.loading = 'lazy';
    img.src = img.dataset.lazySrc;
  });
  console.log('Native loading="lazy" is supported on this browser');
} else {
  // Fall back to an IntersectionObserver-based polyfill on older browsers
  import('./lazy-load-polyfill.js').then(({ observe }) => observe('img[data-lazy-src]'));
  console.log('Native lazy loading is not supported, polyfill loaded');
}

For iframe support, swap HTMLImageElement for HTMLIFrameElement. The two properties report independently because Firefox shipped the img attribute long before the iframe attribute, and a feature-detect that only checks the img path will report a false positive on Firefox 75 to 120 for iframes.

What are the known issues with loading=lazy?

loading=lazy ships in every modern browser, but the way each engine measures the viewport threshold, handles hidden carousels, and treats the LCP image still trips up production sites.

• Hero image marked lazy delays LCP: Marking the Largest Contentful Paint image as loading=lazy pushes the fetch past the initial parse, which can move the LCP by 1 to 3 seconds on a slow connection. Always leave the hero image as loading=eager (or omit the attribute) and apply lazy only to images below the first viewport.
• Carousels load all slides at once in Chrome: Chrome 121 and later prefetch images inside a horizontal-scrolling carousel even when loading=lazy is set, because the engine treats the off-screen slides as imminent. Set fetchpriority=low on the non-visible slides if you want the browser to keep them deferred.
• Missing width and height causes layout shift: A lazy image with no dimensions paints at zero height until the bytes arrive, then jumps to its real size. Always set width and height on the img tag, or set an aspect-ratio in CSS, so the placeholder reserves space from the first paint.
• display:none images do not always defer: Some browsers fetch a hidden img immediately because the element has no viewport position to measure against. Move the image into the DOM only when you need it, or use the IntersectionObserver API for elements you toggle through display.
• Background images are not covered: The loading attribute applies to img and iframe only. CSS background-image, picture sources, and video posters fetch eagerly regardless of any loading hint on a parent. Use content-visibility:auto or an IntersectionObserver to defer those.
• In my experience, the failure that bites teams the most is shipping loading=lazy on the LCP image to satisfy a Lighthouse "lazy load offscreen images" suggestion, when Lighthouse only flags the off-screen ones. The fix is to scope the attribute to images below the fold and to keep loading=eager on the hero, the logo, and any image inside the first viewport.

Citations

All loading=lazy version numbers and platform notes in this guide come from these primary sources:

• WHATWG HTML Standard, lazy loading attributes: html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes
• MDN HTMLImageElement loading property: developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading
• MDN HTMLIFrameElement loading property: developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/loading
• MDN Performance Lazy loading guide: developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading
• web.dev browser-level image lazy loading: web.dev/articles/browser-level-image-lazy-loading
• Chrome Platform Status, native lazy-loading: chromestatus.com/feature/5645767347798016
• WebKit Safari 16.4 release notes: webkit.org/blog/13966/webkit-features-in-safari-16-4
• Mozilla Firefox 75 release notes: mozilla.org/en-US/firefox/75.0/releasenotes
• Mozilla Firefox 121 release notes: mozilla.org/en-US/firefox/121.0/releasenotes
• Wikipedia Lazy loading: en.wikipedia.org/wiki/Lazy_loading
• Microsoft Learn, Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support