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.