What is "lazy loading"?

JavaScriptJunior~2 min read

What Lazy Loading is

Lazy loading is a technique in which resources (images, videos, scripts, components, etc.) are loaded only when the user actually needs them, not right away when the page opens.

Simply put:

"Don't load what the user cannot yet see."

How it works

When a page opens:

The browser loads only the visible content (above the fold);
the rest of the elements (for example, images below the screen) are marked as "lazy";
as soon as the user scrolls and an element enters the visible area (viewport), the browser loads it.

Example - lazy loading images

The modern way (an HTML attribute)

javascript

<img src="photo.jpg" alt="Photo" loading="lazy">

The browser itself delays loading the image until it enters the visible area.
Supported in all modern browsers.

Example - for iframes (video, maps, etc.)

javascript

<iframe
  src="https://www.youtube.com/embed/..."
  loading="lazy"
></iframe>

This is especially important for YouTube and Google Maps - they are heavy, and the user may never open them.

A JavaScript-based option (for fine-grained control)

javascript

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      obs.unobserve(img);
    }
  });
});

images.forEach(img => observer.observe(img));

And in the HTML:

javascript

<img data-src="photo.jpg" alt="Photo" />

IntersectionObserver is used to "catch" the moment an element enters the visible area.

Lazy loading of components (in JS frameworks)

React / Next.js:

javascript

const Chart = React.lazy(() => import('./Chart'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Chart />
    </Suspense>
  );
}

The Chart component loads only on the first render of that block. This reduces the bundle size at startup.

Next.js (dynamic import):

javascript

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });

What can be loaded lazily

Resource type	Lazy Loading	Example
Images	Yes	`<img loading="lazy">`
Video / iframe	Yes	`<iframe loading="lazy">`
Components	Yes	`React.lazy()` / `import()`
Scripts	Yes	`<script defer>` or dynamic loading
API data	Yes	A request only when the block is first shown
CSS (optional themes)	Yes	dynamic style loading

Advantages

Faster page load - less data on the first request.
Better Core Web Vitals (LCP, FCP, TTI).
Traffic savings - especially important on mobile.
Less server load.
Smooth UX - content appears as the user scrolls.

Downsides and mistakes

If you overdo lazy loading, important elements (hero-section images, logos) may load with a delay, which worsens LCP (Largest Contentful Paint).

If the observer script (IntersectionObserver) has not loaded, lazy elements will not appear.

An SEO concern: that's why it matters that critical images load right away, rather than lazily (search engines may not scroll the page).

When to use it

Where	Lazy Loading helps
Galleries / catalogs	Many images (e-commerce, a blog, a portfolio)
Long pages	Long-form content, articles
SPA / dashboards	Loading components per tab
Complex visualizations	Charts, graphs, maps - only when shown

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.