SyntaxShelf

Lazy loading

2 snippets across 2 stacks - HTML & CSS, React

Also written as loading lazy

HCHTML & CSS

Lazy Loading Images

HC · Images & Media
Syntax
<img src="url" alt="description" loading="lazy">
Example
<img src="/gallery/photo-42.jpg" alt="Sunset over the canyon" loading="lazy" width="600" height="400">

Note loading="lazy" defers loading until the image nears the viewport. Do not lazy-load images that are visible on initial load (above the fold) since it slows their appearance. Use loading="eager" (the default) for hero images.

REReact

Suspense & Lazy Loading

RE · Patterns
Syntax
const LazyComponent = React.lazy(() => import('./Component'));

<Suspense fallback={<Loading />}>
  <LazyComponent />
</Suspense>
Example
import { lazy, Suspense, useState } from 'react';

const AdminPanel = lazy(() => import('./AdminPanel'));
const UserDashboard = lazy(() => import('./UserDashboard'));

function App({ role }) {
  return (
    <Suspense fallback={<div className="spinner">Loading...</div>}>
      {role === 'admin' ? <AdminPanel /> : <UserDashboard />}
    </Suspense>
  );
}

Note React.lazy only works with default exports. For named exports, create an intermediate module that re-exports as default. Suspense can also wrap components that use the use() hook to read promises in React 19.

Frequently asked questions

How does HTML & CSS handle lazy loading?
This task is covered in 2 stacks on this page: HTML & CSS, React. The "Lazy Loading Images" snippet in HTML & CSS uses `<img src="url" alt="description" loading="lazy">`.
Which code does the HTML & CSS example use?
The "Lazy Loading Images" snippet uses `<img src="url" alt="description" loading="lazy">`, from the Images & Media section of the HTML & CSS cheat sheet.
Which stacks cover "lazy loading" on this page?
HTML & CSS, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Lazy Loading Images": loading="lazy" defers loading until the image nears the viewport. Do not lazy-load images that are visible on initial load (above the fold) since it slows their appearance. Use loading="eager" (the default) for hero images.

Browse all tasks by intent