Lazy Loading
懒加载
Aliases:懒加载按需加载延迟加载滚动到才加载图片懒加载进入视口加载
What is it
Defers loading of off-viewport resources: images, list chunks and components are fetched and rendered only when they approach or enter the viewport. The first screen pays only for what is visible, with placeholders preventing layout jumps as content streams in.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Pages with many images or long lists beyond the first screen
- First-load performance matters and initial requests must shrink
- Much of the content will likely never be scrolled to
✕ When not to use
- Assets sit in the first screen — deferring only adds delay
- Printing, SEO or no-JS contexts need the full content upfront
- Few tiny assets — splitting costs more than it saves
Variants
Native
原生懒加载
One attribute, browser handles it
IntersectionObserver
视口侦测
Mount and fade in on intersection, more control
Placeholder
占位渐进
Blur-up or solid placeholder swaps in when ready
Implementation
loading: lazyIntersectionObserveropacitytransformPrefer native loading="lazy" for images; use IntersectionObserver on a placeholder for custom timing or animation, then set the real src or mount the component with an opacity/translate reveal. Reserve space with aspect-ratio to avoid layout shift. Respect prefers-reduced-motion by revealing instantly.
Related concepts
Replaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsSimilarGrey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
PatternsSimilarLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsSimilarWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilarA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsUsed with