How to Build Efficient Lazy Loading with IntersectionObserver

Load Without Showing! Smart Content Management with IntersectionObserver

In modern web development, speed is no longer a luxury—it’s a necessity. Users hate waiting, and browsers hate being overworked. That’s where Lazy Loading comes in: only visible content loads, while the rest waits until needed.
But traditional scroll-based solutions are often messy or performance-heavy. Thankfully, the 21st century has a hero: the IntersectionObserver API!

What Is IntersectionObserver?

As the user scrolls, when an image or component comes into view, the browser says ‘now it’s time to load!’. That way, you avoid loading content unnecessarily.

The benefit? Less data consumption, less rendering effort, happier users. 😌

This API isn’t just for images—it can trigger videos, animations, or even analytics events based on scroll position.

In the past, we constantly listened to the scroll event and calculated visibility manually. No more! IntersectionObserver does the math for us.

A Simple Lazy Loading Example

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

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.add('loaded');
      obs.unobserve(img);
    }
  });
}, {
  rootMargin: '100px',
  threshold: 0.1
});

images.forEach(img => observer.observe(img));

Why Use IntersectionObserver?

• Performance-friendly: Far fewer computations compared to scroll events.
• Clean code: Callback-based structure eliminates messy condition chains.
• SEO + UX friendly: Faster load times mean better Lighthouse scores.
• Observability: You can log and analyze when each element loads.
• Browser support: Chrome, Firefox, Edge, Safari (including mobile) all support it. Only IE needs a polyfill. IE... 🙃

Beyond Lazy Loading: Infinite Scroll and Dynamic Content

Infinite Scrolling

const sentinel = document.querySelector('#load-more');
const io = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadMoreItems();
});
io.observe(sentinel);

Triggering Animations

Advanced Options

• root → The container to observe (default: viewport)
• rootMargin → Expands or shrinks the observation area (e.g., '200px' loads earlier).
• threshold → Defines visibility percentage before triggering (e.g., 0.5 = trigger when half visible).

💡 Tip: LQIP (Low Quality Image Placeholder)
Show a low-res preview before the main image loads for better UX.

<img data-src="highres.jpg" src="lowres.jpg" class="lazy" alt="example" />

When the image becomes visible, IntersectionObserver loads the high-res version. Instead of a blank box, users see a progressively sharpening image—both elegant and psychologically satisfying. 😌

Performance Tips

• Reuse a single observer for multiple elements. Don’t create one per image.
• Use unobserve() after loading to free memory.
• Don’t lazy-load above-the-fold content—it hurts LCP (Largest Contentful Paint).
• For SSR apps (Next.js, Nuxt, etc.), activate lazy loading client-side.

FAQ: Does It Hurt SEO?

<noscript>
  <img src="highres.jpg" alt="example" />
</noscript>

Conclusion