为不相交的图像调用相交观察器的回调

Question

我有一些固定高度的图片我想延迟加载。这些图像被包裹在一个组件中，<LazyLoad /> 提供了一个路口观察器。在主页中，我使用了其中的一些 <LazyLoad /> 组件。然而，尽管我有 6 个这些组件并且其中只有一个（第一个）似乎与视口相交，但它实际上是已经加载的前 4 个图像，所以只有最后两个是延迟加载的。我如何让观察者按照我的预期工作？

密码是in this sandbox.

Answer 1

您的问题来自 img 空字符串。该页面呈现图像但忽略您在其上设置的 height 。这意味着所有图像都在触发观察者的视口内。您可以考虑使用 null 值而不是空字符串。它避免了这个问题。此处 your example 已更新。

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

为不相交的图像调用相交观察器的回调

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

reactjs

intersection-observer