Lazy-loading images and iframes
The loading property of the HTMLIFrameElement interface is a string that provides a hint to the browser indicating whether the iframe should be loaded immediately on page load, or only when it is needed.
This can be used to optimize the loading of the document's contents. Iframes that are visible when the page loads can be downloaded immediately (eagerly), while iframes that are likely to be offscreen on initial page load can be downloaded lazily — just before they will appear in the window's visual viewport.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 77 | 79 | 121 | 16.4 | 77 | 16.4 | |
| HTML attribute | ||||||
loading | 77 | 79 | 121 | 16.4 | 77 | 16.4 |
loading | 77 | 79 | 75 | 15.4 | 77 | 15.4 |
| DOM API | ||||||
| The loading property of the HTMLImageElement interface provides a hint to the browser on how to handle the loading of the image which is currently outside the window's visual viewport. This helps to optimize the loading of the document's contents by postponing loading the image until it's expected to be needed, rather than immediately during the initial… | 77 | 79 | 75 | 15.4 | 77 | 15.4 |
Syntax
<!--Apply to images outside the first view --> <img src="photo.jpg" alt="photo" loading="lazy" width="800" height="600"> <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>Live demo
Lazy image gallery
Set loading="lazy" on below-the-fold images while keeping the markup simple.
Best-practice checklist
Pair lazy loading with width, height, and meaningful alt text.
Use cases
-
Use Lazy-loading images and iframes
Use Lazy-loading images and iframes when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
-
Handle edge cases
Apply Lazy-loading images and iframes to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test Lazy-loading images and iframes in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure Lazy-loading images and iframes supports the intended task without making the page harder to perceive, understand, or operate.