ResizeObserver & IntersectionObserver APIs0%
IndexedDB Architecture & Transactions

ResizeObserver & IntersectionObserver APIs

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

ResizeObserver & IntersectionObserver APIs in Modern JavaScript

Historically, detecting when an element became visible on screen or changed dimensions required attaching expensive scroll and resize listeners to window with heavy debouncing. The modern standard Web APIs—IntersectionObserver and ResizeObserver—perform these calculations directly in the browser's native compositing pipeline with high efficiency.

1. IntersectionObserver: Visibility & Viewport Tracking

IntersectionObserver detects when a target element intersects with an ancestor element or the top-level document viewport.

Output
Browser Viewport (Window)
┌─────────────────────────────────┐
│ │
│ Target Element (Below Fold) │
│ [ 0% Visible: Ratio 0.0 ] │
└─────────────────────────────────┘
│ (User scrolls down)
┌───────────────▼─────────────────┐
│ [ 50% Visible: Ratio 0.5 ] │ ──► Callback triggers!
└─────────────────────────────────┘

High-Performance Lazy-Loading Images:

JavaScript
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// If the image is within viewport threshold:
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // Replace placeholder with real URL
img.classList.add('loaded');
observer.unobserve(img); // Cease observing once loaded!
}
});
}, {
root: null, // Defaults to browser viewport
rootMargin: '200px', // Pre-fetch image 200px BEFORE it enters screen!
threshold: 0.1 // Trigger when 10% visible
});
 
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});

2. Infinite Scrolling with IntersectionObserver

Instead of calculating scroll height mathematics, place an empty "sentinel" <div> at the bottom of the feed:

JavaScript
const sentinel = document.querySelector('#scroll-sentinel');
 
const infiniteScrollObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadNextPageOfData();
}
});
 
infiniteScrollObserver.observe(sentinel);

3. ResizeObserver: Element-Level Responsive Queries

While CSS @media queries only evaluate the entire browser window width, modern component design requires styling widgets based on their own container width (Container Queries). ResizeObserver monitors an individual element's box model:

JavaScript
const widget = document.querySelector('.analytics-widget');
 
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
// Read precise content box dimensions
const width = entry.contentRect.width;
// Dynamically adjust layout classes based on element width!
if (width < 400) {
widget.classList.add('compact-view');
widget.classList.remove('wide-view');
} else {
widget.classList.add('wide-view');
widget.classList.remove('compact-view');
}
}
});
 
resizeObserver.observe(widget);

4. Comparison Matrix

FeatureIntersectionObserverResizeObserver
MonitorsRelative visibility / viewport overlapElement boundary / contentRect size changes
Key Use CasesLazy loading images, infinite scroll, ad viewabilityContainer queries, responsive charts, canvas redraws
PerformanceOff-main-thread compositing engineBatched before paint; prevents layout loops
Interactive Quiz

Practice Quiz

Question 1
What is the primary performance benefit of IntersectionObserver over listening to window.addEventListener('scroll')?
Question 2
In an IntersectionObserver options object, what does rootMargin: '200px' do?
Question 3
What method should be called on an IntersectionObserver instance once a target image has successfully loaded?
Question 4
Why is ResizeObserver preferred over window.addEventListener('resize') for responsive components?
Question 5
What threshold value ensures an IntersectionObserver callback fires when half of the element is visible?
Next Lesson

IndexedDB Architecture & Transactions

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
MutationObserver APIIndexedDB Architecture & Transactions

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext