# Lazy Loading

URL: https://softwaredictionary.org/terms/lazy-loading
Category: Web Development
Last updated: 2026-09-30

In short: Lazy loading is a technique that delays loading images, videos, scripts or other resources until they are actually needed, usually when they scroll into view.

## What is lazy loading?

Lazy loading means not loading something until the moment it is needed. On a web page, images and embedded videos far below the fold, the part visible without scrolling, are fetched only when the user scrolls near them instead of all at once when the page opens. The initial load becomes smaller and faster, and visitors who never scroll that far never download those files.

For images and iframes, browsers support lazy loading natively: add `loading="lazy"` to an `<img>` or `<iframe>`, and the browser decides when to fetch it based on its distance from the viewport. For custom behavior, the `IntersectionObserver` API tells your script when an element enters or approaches the viewport. For JavaScript, lazy loading uses dynamic `import()`, so a module is fetched only when a feature is first used. Lazy images should have `width` and `height` set, so the browser reserves space and the layout doesn't jump when they arrive.

Lazy loading is like a restaurant that cooks each course when you're ready for it, instead of putting the whole meal on the table the moment you sit down. It is widely used for image galleries, long feeds, product listings, embedded maps and videos, comment sections, and rarely used app features. The same idea appears in ORMs, which can load related database records only when code first accesses them.

A common mistake is lazy loading the main image at the top of the page, which is often the Largest Contentful Paint element; that delays the most important content, so above-the-fold images should load right away, sometimes with `fetchpriority="high"`. Lazy loading is also different from code splitting: code splitting divides JavaScript into separate files at build time, while lazy loading is the runtime decision of when to fetch a file.

## Key takeaways

- Lazy loading defers fetching a resource until it is needed.
- `loading="lazy"` on images and iframes enables native browser lazy loading.
- `IntersectionObserver` and dynamic `import()` cover custom and JavaScript cases.
- Never lazy load above-the-fold content such as the main hero image.
- Set image dimensions to prevent layout shifts when lazy images appear.

## Example: Native lazy loading for images and iframes

```html
<!-- Main image at the top: load it right away, with high priority -->
<img src="hero.jpg" alt="Product photo" width="1200" height="600" fetchpriority="high">

<!-- Below the fold: fetched only when the user scrolls near them -->
<img src="gallery-1.jpg" alt="Side view" width="600" height="400" loading="lazy">
<img src="gallery-2.jpg" alt="Back view" width="600" height="400" loading="lazy">
<iframe src="https://maps.example.com/embed?place=store" title="Store location map"
        width="600" height="400" loading="lazy"></iframe>
```

## Frequently asked questions

**Does lazy loading hurt SEO?**

Not when it is done properly. Search engines handle native `loading="lazy"` images well; problems arise when content appears only after clicks or custom scroll events that crawlers don't perform.

**Should I lazy load all images?**

No. Lazy load images below the fold, but load the ones visible on first screen immediately, especially the largest one, or the page will appear to load more slowly.

**What is the difference between lazy loading and eager loading?**

Eager loading fetches a resource right away, which is the browser's default, while lazy loading waits until it is needed. In ORMs, eager loading fetches related records up front, which avoids the N+1 query problem that lazy loading can cause.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt