Lazy Loading (original) (raw)

Last Updated : 2 May, 2026

Lazy loading is a performance optimization technique that loads resources only when they are needed.
It helps improve initial load time and overall efficiency in modern JavaScript applications.

• Improves page load speed by deferring non-critical resources.
• Reduces bandwidth usage and memory consumption.
• Enhances user experience, especially in large web applications.

Reasons to Use Lazy Loading

Lazy loading provides several benefits, such as

• **Faster Initial Page Load: By only loading the necessary content first, users can start interacting with the website sooner.
• **Reduced Bandwidth Usage: Unnecessary resources are not loaded unless required, saving data.
• **Improved Performance and SEO: Since search engines prioritize fast-loading pages, lazy loading can help improve SEO rankings.
• **Optimized Resource Utilization: Reduces server load and improves efficiency, especially for websites with a large number of assets.

Working of Lazy Loading in Images

Lazy loading in JavaScript loads images or videos only when they’re about to be seen on the screen. This speeds up page load times and saves bandwidth. This can be done using

• Initially, a low-resolution placeholder or a blank space is used instead of the actual image. When the image is about to enter the viewport, the actual image is loaded.
• This API detects when an image comes into the viewport and loads it dynamically.
• JavaScript event listeners track user scrolling and replace placeholders with actual images when needed.
• The HTML loading="lazy" attribute tells the browser to handle lazy loading automatically without JavaScript.

Lazy Loading Images using Intersection observer API

This code implements lazy loading in JavaScript with the help of Intersection Observer API. It is an API that helps load images after the UI is rendered. It is used to halt the general nature of loading for images.

HTML `

Lazy Loading Images

`

• **Async Script: The first