Back to the catalog

Lazy-loaded images and iframes

Async, Observers & Data

loading="lazy"

Baseline widely availablederived from web-features, captured 2026-10-04
  • Chrome77
  • Edge79
  • Firefox121
  • Safari16.4

Features it needs

These libraries watch the viewport with an IntersectionObserver and swap a placeholder for the real src once an image or iframe scrolls close enough. The loading attribute does the same deferral without the observer, the placeholder markup, or the script that has to run before it can start. The browser decides how far ahead to fetch, so there is no distance threshold to tune.

When this applies

Deferring offscreen images or iframes so they load as the user scrolls to them.

The native approach

loading="lazy"
<img src="/hero.jpg" alt="" loading="lazy" width="1200" height="630" />
<iframe src="https://example.com/embed" loading="lazy"></iframe>
Live example

MDN reference

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • The element is a video or audio tag. loading is not yet Baseline on those, so an IntersectionObserver is still the reliable way to defer them.
  • You are lazy-loading a CSS background-image. The loading attribute only applies to img and iframe elements.
  • You need a blur-up or low-quality placeholder while the real image streams in. That is a rendering concern the attribute does not cover.
  • You need to control how far ahead of the viewport loading starts. The browser's heuristic is not configurable per element.
  • You are lazy-loading a component tree, not media, such as mounting a chart only once it scrolls into view.

Building it

This catalog stops at the swap. These guides go through the implementation and the fallbacks, and each one reads in the terminal through its own command.

FromGoogle Chrome / modern-web-guidanceApache-2.0v0.0.191indexed 2026-10-04

Signs it was hand-rolled

No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.

  • an IntersectionObserver that swaps a data-src attribute into src when an image nears the viewport
  • a scroll listener deciding which images are close enough to start loading

Packages this covers

Minified and gzipped, captured 2026-09-20.