reactjs - 为不相交的图像调用相交观察者的回调

Question

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

代码在这个沙箱中。

Answer 1

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

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