Should I use native lazy loading or the IntersectionObserver version?

Native loading="lazy" is the simplest, most robust choice: it ships zero JavaScript, the browser tunes the viewport distance for you, and it degrades gracefully — but it only exists for and . The tool greys out native for backgrounds, video, and components and uses an IntersectionObserver instead. Reach for the observer when you need control native loading cannot give you, such as a custom rootMargin, scripted blur-up, or a fade-in. Pick the technique with the buttons under "Technique".

What frameworks does it generate code for?

Vanilla JS, React, Next.js, and Vue. For vanilla, the HTML tab holds the markup and the JavaScript tab holds the observer script. For React, Next.js, and Vue the component code is emitted in the JavaScript tab — for example a React.lazy + Suspense component, a next/dynamic import, next/image with a blur placeholder, or a Vue defineAsyncComponent — so you copy a self-contained snippet for your stack.

What do the threshold and rootMargin options do?

They configure the IntersectionObserver. Threshold is the fraction of the element that must be visible (0 fires as soon as a single pixel appears, 1 waits until it is fully on screen). rootMargin grows or shrinks the viewport box used for the check — a value like "200px 0px" starts loading 200 pixels before the element scrolls into view, so the asset is usually ready by the time the user reaches it. These inputs appear only when the IntersectionObserver technique is selected.

How does the generated code avoid layout shift?

Set explicit Width and Height and the tool adds those attributes (or an aspect-ratio box for backgrounds) so the browser reserves space before the asset loads. If you leave them at zero, the Notes & warnings panel flags that lazy assets will cause Cumulative Layout Shift as they pop in. The panel also warns never to lazy-load your LCP/hero asset, which would delay Largest Contentful Paint.

What does component mode generate?

Component mode produces code-splitting snippets rather than DOM observer code, and needs no URL. Depending on the framework you pick it emits a React.lazy import wrapped in Suspense, a Next.js next/dynamic import (optionally with ssr: false), a Vue defineAsyncComponent, or a vanilla dynamic import() driven by an observer. The chunk only downloads when the component renders.

Why do some output tabs not appear?

Each combination only produces the panels that make sense for it. A pure native image yields just HTML; an observer image adds JavaScript and CSS; backgrounds add CSS; framework targets put their code in the JavaScript tab. The tab strip filters itself to whatever the current configuration generated and keeps a valid tab selected as you change targets and frameworks.

Lazy Loading Generator

Generate production-ready lazy-loading code for images, iframes, CSS backgrounds, video and components — native loading="lazy" or IntersectionObserver, for vanilla JS, React, Next.js or Vue. Add blur-up placeholders, fade-in, decoding="async" and fetchpriority, tune rootMargin/threshold, and get the HTML, JS and CSS you need.

About this ToolHow it works, benefits & use cases

This generator writes production-ready code for deferring off-screen assets until the user scrolls near them. Pick what you are loading — an image, an iframe, a CSS background image, a video, or a heavy component — then choose a technique (native loading="lazy" or a scripted IntersectionObserver) and a framework target (vanilla JS, React, Next.js, or Vue). Native loading is offered only for images and iframes, the two elements that support it; everything else automatically falls back to an observer. Layer on extras: a blur-up LQIP placeholder, an opacity fade-in with a custom duration, decoding="async" and a fetchpriority hint for images, explicit width/height to reserve space, and the observer's rootMargin and threshold. Output appears live across HTML, JavaScript, and CSS tabs — only the panels a combination actually needs are shown, with React/Next.js/Vue component code emitted in the JavaScript tab. A Notes & warnings panel surfaces contextual guidance (most importantly, never lazy-load your LCP/hero asset), and curated presets jump-start common setups like blog images, infinite galleries, lazy iframes, and Next.js dynamic imports.

How to Use

1Pick a preset for a common setup, or build from scratch by choosing what you are loading: image, iframe, background image, video, or component.
2Choose a technique — native loading="lazy" (images/iframes only) or IntersectionObserver — and a framework: vanilla, React, Next.js, or Vue.
3Enter the asset URL and alt/title, and set width/height to reserve space; component mode needs no URL.
4Toggle options like blur-up LQIP, fade-in, decoding="async" and fetchpriority, and tune rootMargin/threshold for the observer.
5Switch between the HTML, JavaScript and CSS tabs to copy or download the generated snippet, and read the Notes & warnings panel.

Key Benefits

Five targets in one tool — images, iframes, CSS background images, video, and components
Two techniques (native loading="lazy" vs. configurable IntersectionObserver) with native auto-disabled where it does not apply
Emits framework-specific code for vanilla JS, React, Next.js, and Vue from the same settings
Rich options: blur-up LQIP, fade-in with custom duration, decoding="async", fetchpriority, width/height, rootMargin and threshold
Live HTML / JavaScript / CSS tabs that show only the panels a given combination needs
Contextual Notes & warnings panel flags LCP/hero mistakes, layout shift, and per-target best practices
Curated presets (blog images, infinite gallery, lazy iframe, lazy video, Next.js Image, next/dynamic, React.lazy) plus copy/download per snippet

Common Use Cases

Deferring below-the-fold gallery images with native lazy loading and a blur-up placeholder
Lazy-mounting a YouTube or maps iframe so its third-party JS does not block first paint
Loading a heavy CSS background image only as its section nears the viewport
Fetching a video lazily with a poster image and preload="none" instead of up front
Code-splitting a heavy component with React.lazy, next/dynamic, or Vue defineAsyncComponent

HTML — Image · Vanilla JS

<img
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIzMCI+PGZpbHRlciBpZD0iYiI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNiKSIgZmlsbD0iI2NiZDVlMSIvPjwvc3ZnPg=="
  data-src="https://example.com/images/photo.jpg"
  alt="Descriptive alt text"
  loading="lazy"
  decoding="async"
  fetchpriority="low"
  width="1200"
  height="800"
  class="blur-up"
  onload="this.src=this.dataset.src;this.classList.add('is-loaded')"
>

Notes & warnings

Never lazy-load your LCP / hero asset. Deferring the largest above-the-fold element delays the Largest Contentful Paint and hurts Core Web Vitals — reserve lazy loading for below-the-fold content.
Native loading="lazy" is the simplest, most robust option for images: zero JS, the browser tunes the viewport distance for you, and it degrades gracefully. Prefer it unless you need a custom placeholder/animation pipeline.
Blur-up: ship a tiny (~1–2KB) low-quality placeholder inline, then swap in the full asset and remove the blur. It hides network latency without a layout shift.

Presets

What are you loading?

Technique

Framework

Source

Asset URL

Alt text

Width (px)

Reserve space — prevents layout shift

Height (px)

Options

Blur-up LQIP placeholder

Ship a tiny blurred placeholder, then swap in the full asset

Fade-in transition

decoding="async"

Decode off the main thread for smoother scrolling

Fade / transition duration (ms)

fetchpriority

Hint the browser how to prioritise the fetch

LQIP placeholder (data URL or tiny image)

Native vs. IntersectionObserver

Reach for native loading="lazy" first: it ships zero JavaScript, the browser tunes the viewport distance for you, and it degrades gracefully on old browsers. It only exists for <img> and <iframe>.

Use an IntersectionObserverwhen you need control native loading can't give you — CSS background images, <video>, scripted blur-up, or a custom fade. Whatever you pick, never lazy-load your LCP / hero image: deferring the largest above-the-fold element delays Largest Contentful Paint and hurts Core Web Vitals.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Lazy Loading Generator

How to Use

Key Benefits

Common Use Cases

Notes & warnings

Presets

What are you loading?

Technique

Framework

Source

Options

Native vs. IntersectionObserver

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Lazy Loading Generator