Intersection Observer & Efficient Scroll Handling

What is the best way to implement scroll-based infinite image galleries?

const galleryObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !isLoading) {
      isLoading = true;
      loadMoreImages()
        .then(images => {
          appendImages(images);
          isLoading = false;
        })
        .catch(error => {
          console.error('Failed to load images:', error);
          isLoading = false;
        });
    }
  });
}, {
  root: null,
  rootMargin: '200px 0px',
  threshold: 0
});

Load all images at once
Use scroll event listeners
Preload entire gallery
Use Intersection Observer with preload margin
Using Intersection Observer for infinite image galleries is optimal because: 1) rootMargin allows preloading before images are needed, creating a seamless experience, 2) The loading state prevents multiple simultaneous requests, 3) Error handling ensures robustness, 4) Performance is maintained even with large galleries. The code shows proper implementation with preloading margin, loading states, and error handling for a smooth infinite gallery experience.

Next Question (18/20)