IntersectionObserver API in JavaScript

// Lazy load images as they scroll into view
const imageObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;  // load the real image
            img.classList.add('loaded');
            observer.unobserve(img);    // stop watching once loaded
        }
    });
}, {
    rootMargin: '200px',  // start loading 200px before entering viewport
    threshold: 0          // fire as soon as any part is visible
});

// Observe all images with data-src attribute
document.querySelectorAll('img[data-src]').forEach(img => {
    imageObserver.observe(img);
});

// HTML:
// <img data-src="/images/photo.jpg" src="/images/placeholder.jpg" />

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        console.log(`${entry.target.id}: ${entry.intersectionRatio.toFixed(2)} visible`);
        console.log('isIntersecting:', entry.isIntersecting);
    });
}, {
    root: null,          // null = viewport (default)
    rootMargin: '0px',   // expand/contract the root's bounding box
    threshold: [0, 0.25, 0.5, 0.75, 1.0]  // fire callback at each threshold
    // threshold: 0.5 fires when element is 50% visible
});

// Scroll animation — add class when element enters viewport
const animationObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        entry.target.classList.toggle('visible', entry.isIntersecting);
    });
}, { threshold: 0.1 });  // fire when 10% visible

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    animationObserver.observe(el);
});

// Observe a sentinel element at the bottom of the list
const sentinel = document.querySelector('#load-more-sentinel');
let page = 1;
let isLoading = false;

const scrollObserver = new IntersectionObserver(async (entries) => {
    const [entry] = entries;
    if (!entry.isIntersecting || isLoading) return;

    isLoading = true;
    page++;

    try {
        const response = await fetch(`/api/items?page=${page}`);
        const items = await response.json();

        if (items.length === 0) {
            scrollObserver.unobserve(sentinel);  // no more pages
            sentinel.remove();
            return;
        }

        items.forEach(item => renderItem(item));
    } finally {
        isLoading = false;
    }
}, { rootMargin: '300px' });  // load before hitting the bottom

scrollObserver.observe(sentinel);

function renderItem(item) {
    const el = document.createElement('div');
    el.textContent = item.title;
    document.querySelector('#list').appendChild(el);
}