Lazy loading
Also called lazy load or deferred loading
A technique that waits to load images, videos, or code until they are about to scroll into view, so the first screen loads faster.
import { useState } from 'react';
type Props = {
src: string;
preview: string; // a tiny version, about 20px wide
alt: string;
width: number;
height: number;
eager?: boolean; // true for images in the first screen
};
export function BlurImage({ src, preview, alt, width, height, eager }: Props) {
const [loaded, setLoaded] = useState(false);
return (
// The aspect ratio reserves the space, so nothing shifts while it loads.
<div
className='relative overflow-hidden rounded-xl'
style={{ aspectRatio: `${width} / ${height}` }}
>
<img
src={preview}
alt=''
className='absolute inset-0 size-full scale-110 object-cover blur-xl'
/>
{/* lazy: fetched only when it nears the viewport. */}
<img
src={src}
alt={alt}
width={width}
height={height}
loading={eager ? 'eager' : 'lazy'}
decoding='async'
onLoad={() => setLoaded(true)}
className={`relative size-full object-cover transition-opacity duration-400 ${loaded ? 'opacity-100' : 'opacity-0'}`}
/>
</div>
);
}Lazy-load the gallery: add loading="lazy" with explicit width and height to every image below the fold, show a 20px blurred preview that fills the frame until the full image loads, then fade it to sharp over 400ms. Keep the first row of images eager so the top of the page loads immediately.
Paste into Layerwise or any AI coding tool.
What is Lazy loading?
A long page may hold dozens of images, but a visitor sees only a few at first. Lazy loading fetches each one only when it gets close to the viewport, shortly before it scrolls into view. The first screen loads sooner, and people who never scroll down never download the rest.
For images and iframes, the browser does the work with loading="lazy", and the Next.js next/image component lazy-loads by default. For other content, an IntersectionObserver reports when an element nears the viewport, and a dynamic import() delays loading code until it is needed.
Pair it with a placeholder so the layout doesn’t jump: give each image a width and height (or an aspect-ratio), then show a solid color or a tiny blurred preview that sharpens when the full image arrives, the blur-up technique in the demo. Don’t lazy-load images in the first screen, especially the hero image, because that delays the page’s main content.
Often confused with
- Infinite scroll
- Infinite scroll adds new items to a list when you reach the end. Lazy loading delays loading things that are already on the page until they near the screen.
Related terms
All termsInfinite scroll
A list that loads the next batch of items automatically as you scroll near the bottom, so the feed seems to never end.
Skeleton screen
A loading placeholder made of gray blocks shaped like the content on its way, often with a soft shimmer, that the real content replaces.
Perceived performance
How fast an app feels to people, which skeleton screens, instant feedback, and progressive loading can improve even when the real wait stays the same.
Blur
A softening effect made with CSS filter: blur() on an element itself, or backdrop-filter: blur() on whatever shows through it from behind.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
