How to Lazy Load Images Using Native JavaScript

A product page with 60 photos does not need to download all 60 the moment someone lands on it. Visitors typically see three or four before scrolling. Native JavaScript can lazy load images with a single HTML attribute, or with full custom control through the IntersectionObserver API, and this guide gives you working code for both.

Lazy loading images with native JavaScript means deferring image downloads until they are actually close to entering the viewport, using either the browser's built-in loading="lazy" attribute or the IntersectionObserver API for cases the native attribute cannot handle, like CSS background images.

We covered the strategy and SEO implications in our lazy loading images guide. This article is the implementation half: the actual code, working today, in three different approaches.

Browser Support: Why Native Alone Is Usually Enough

Method 1: Native Lazy Loading in One Attribute

This is the simplest way to lazy load images, requiring no JavaScript at all for the majority of visitors.

<img src="product-photo.jpg"
     width="600" height="400"
     loading="lazy"
     alt="Blue ceramic coffee mug on wooden table">

width and height are required to prevent layout shift once the image actually loads

Method 2: IntersectionObserver for Full Control

According to DebugBear's guide to lazy loading with IntersectionObserver, this native browser API detects viewport intersection without the performance cost of manual scroll event listeners.

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

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px 0px' });

lazyImages.forEach((img) => imageObserver.observe(img));

rootMargin loads images 200px before they reach the visible viewport, avoiding a visible pop-in

<img data-src="product-photo.jpg"
     src="placeholder-tiny.jpg"
     width="600" height="400"
     alt="Blue ceramic coffee mug on wooden table">

Matching HTML: the real image URL sits in data-src until the observer swaps it in

Method 3: Lazy Loading CSS Background Images

According to PageSpeed Matters' complete 2026 lazy loading guide, the native loading attribute does not apply to CSS background images at all, since they are not standard img elements.

document.querySelectorAll('.lazy-bg').forEach((el) => {
  const bgObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('bg-loaded');
        entry.unobserve?.(entry.target) ?? bgObserver.unobserve(entry.target);
      }
    });
  });
  bgObserver.observe(el);
});

Adds a class that triggers the actual background-image URL, defined separately in CSS

/* CSS: background-image only applies once .bg-loaded is added */
.lazy-bg.bg-loaded {
  background-image: url('hero-banner.jpg');
}

The class-swap pattern for background images referenced above

Should You Use a Feature-Detection Fallback?

For most sites, no. Tap through both scenarios to see why.

if ('loading' in HTMLImageElement.prototype) {
  // Native lazy loading is supported, do nothing extra
} else if ('IntersectionObserver' in window) {
  // Fall back to the IntersectionObserver pattern from Method 2
}

Feature detection: only runs the JavaScript fallback where native support is actually missing

Lazy Load Decision Helper

Select the type of image to get the right technique for it.

Why You'd Choose IntersectionObserver Over Native

According to Fasal Engineering's step-by-step guide to IntersectionObserver, the API uses the browser's compositor thread for intersection calculations, avoiding the main-thread cost that manual scroll event listeners used to require before this became possible to lazy load images natively at all.

According to Dean Hume's guide to lazy loading images using Intersection Observer, a graceful fallback for browsers lacking IntersectionObserver support simply loads all images immediately, rather than leaving them permanently hidden.

Real-World Impact of Lazy Loading Images Correctly

According to VitalsFixer's complete native lazy loading guide, a typical product page loading 60 images upfront, when only 3 or 4 are ever seen without scrolling, wastes significant bandwidth that lazy loading images correctly eliminates entirely.

Preventing Layout Shift From Lazy-Loaded Images

Testing Your Lazy Loading Setup

According to web.dev's official guide to browser-level image lazy loading, running Lighthouse after implementation confirms two things at once: that below-fold images are correctly deferred, and that no above-fold or LCP image was accidentally caught by the same loading="lazy" attribute.

According to Divotion's guide to lazy loading images with IntersectionObserver, testing on an actual mobile connection, not just desktop Chrome DevTools throttling, catches real-world lazy loading images behavior that a fast local connection can mask entirely.

FAQs on Lazy Loading Images With Native JavaScript