Deployment Execution Blueprint

---
title: High-Performance Image Lazy Loading Using Vanilla JavaScript
description: A clean frontend optimization blueprint to defer image loadings using the browser native IntersectionObserver API to maximize page speeds.
category: UI/UX Design Systems
slug: vanilla-js-lazy-loading-images.txt
keywords: vanilla js lazy load images, intersection observer API tutorial, optimize website page speed assets, defer offscreen images javascript, fix core web vitals LCP
---

When a visitor lands on a web documentation workspace containing multiple screenshots or architecture diagrams, forcing the browser to download every single image asset simultaneously creates a massive bottleneck. This hoards bandwidth, increases server load, and spikes your mobile page load times, lowering your Core Web Vitals rankings on Google.

Instead of introducing heavy, third-party JavaScript libraries to delay your asset loadings, you can write a clean, native optimization script using the browser's built-in **`IntersectionObserver`** API. This allows you to monitor user scrolls and load images *only* when they are about to enter the viewport screen boundaries.

### Step 1: The Optimized Structural HTML Markup Pattern

Instead of defining a standard `src` attribute (which forces the browser to pull the asset instantly), place your image link path inside a placeholder attribute called `data-src`:

```html
<img class="lazy-load-asset" 
     src="data:image/svg+xml,%3Csvg xmlns='[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)' viewBox='0 0 16 9'%3E%3C/svg%3E" 
     data-src="assets/diagrams/nginx_pipeline_architecture.png" 
     alt="Nginx Reverse Proxy Infrastructure Diagram Workflow Layout">
     
Step 2: The Native IntersectionObserver Automation Engine

document.addEventListener("DOMContentLoaded", () => {
    // 1. Target all placeholders running our lazy loading tracking tag
    const lazyImagesArray = document.querySelectorAll("img.lazy-load-asset");

    // Check if the client's browser engine natively supports the observer protocol
    if ("IntersectionObserver" in window) {
        
        // Configure explicit operational thresholds
        const observerConfigOptions = {
            root: null,         // Use the browser viewport screen frame as default boundary
            rootMargin: "200px 0px", // Pre-fetch images 200px before they scroll into view
            threshold: 0.01
        };

        const imageIngestionObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                // If the element has crossed into our viewport breathing window:
                if (entry.isIntersecting) {
                    const targetImageElement = entry.target;
                    
                    // Swap our data link directly into the primary execution source path
                    targetImageElement.src = targetImageElement.getAttribute("data-src");
                    
                    // Smoothly fade-in the image using your global CSS transition classes
                    targetImageElement.addEventListener('load', () => {
                        targetImageElement.classList.add("asset-fully-loaded");
                    });

                    // Sever the tracking observer completely once the image has initialized
                    observer.unobserve(targetImageElement);
                }
            });
        }, observerConfigOptions);

        // Mount all designated DOM elements straight into the tracking loop
        lazyImagesArray.forEach(imageNode => {
            imageIngestionObserver.observe(imageNode);
        });
        
    } else {
        // FALLBACK: Handle legacy browsers by dumping assets into view immediately
        lazyImagesArray.forEach(imageNode => {
            imageNode.src = imageNode.getAttribute("data-src");
        });
    }
});

Step 3: Accompanying Hardware-Accelerated CSS Transitions
Add this clean, lightweight style adjustment to your style.css file to make sure images fade onto your screen beautifully without layout shifts:

/* Placeholder base layout configuration */
img.lazy-load-asset {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
    background-color: #f1f5f9; /* Soft grey skeleton background fallback box */
}

/* Activated state animation switch handled dynamically via the observer */
img.lazy-load-asset.asset-fully-loaded {
    opacity: 1;
    background-color: transparent;
}