Callback for intersection observer being called for images that are not intersecting

Question

I have some images with a fixed height I want to lazyload. These images are wrapped in a component, <LazyLoad /> which provide an intersection observer. In the main page, I use a few of these <LazyLoad /> components. However, although I have 6 of these components and only one of them (the very first one) seems to be intersecting the view port, it's actually the first 4 images that are already loaded, so only the last two are lazily loaded. How do I get the observer to work as I expect it to?

The code is in this sandbox.

Answer 1

Your issue comes the img with an empty string. The page renders the images but ignore the height you've set on it. Which means that all the images are inside the viewport which trigger the observer. Rather than an empty string you can consider the null value. It avoid this issue. Here your example updated.

getImgUrl = () => {
  return this.state.intersected
    ? "https://images.unsplash.com"
    : null;
};