How to Implement Ultra‑Efficient Lazy Loading with Only 10 Lines of JavaScript

In the past, implementing lazy loading required listening to scroll events and using methods like getBoundingClientRect() to calculate element positions, resulting in verbose code and performance issues.

Modern browsers provide the Intersection Observer API, allowing a highly efficient and concise lazy‑loading implementation—core logic fits in just ten lines of code.

Step 1: Prepare HTML Structure

The lazy‑loading principle is simple: do not place the image URL directly in the src attribute. Instead, store it in a custom data‑* attribute such as data‑src. The src can point to a tiny placeholder (e.g., a 1×1 transparent GIF) to avoid broken‑image icons.

Step 2: JavaScript Magic (10 Lines)

Create a lazy‑load.js file and add the following code:

That’s it! No complex calculations, no tangled event listeners. The code is clear, efficient, and follows modern web standards.

Code Analysis: Why It Works

The Intersection Observer is a browser API that asynchronously observes the intersection of a target element with its ancestor or the viewport. In plain terms, it efficiently tells us when an element enters or leaves the screen.

Let’s break down the ten lines of code: document.querySelectorAll('.lazy'): selects all image elements with the .lazy class. new IntersectionObserver(callback): creates an observer whose constructor receives a callback that fires when the visibility of observed elements changes. entries: the callback parameter, an array containing information about each element whose visibility changed. entry.isIntersecting: a boolean— true means the element is at least partially in the viewport; false means it is completely out, which is the key check for lazy loading. img.src = img.dataset.src: once the image is visible, assign the real URL stored in data‑src to the src attribute, prompting the browser to download and display it. observer.unobserve(img): after the image loads, stop observing it to save resources. observer.observe(image): finally, start observing each image that needs lazy loading.

Advanced Optimization: Preloading

The Intersection Observer also accepts a configuration object for finer control. The rootMargin property is especially useful. rootMargin adds a margin around the viewport, allowing the callback to fire earlier or later. For example, you can start loading an image when it is still 200 px away from entering the viewport.

With this setting, images begin loading before the user scrolls them into view, resulting in a smoother experience.

The Intersection Observer not only minimizes code size but also outperforms traditional methods because it delegates heavy calculations to the browser’s native engine, avoiding main‑thread blockage.