React延迟加载/无限滚动解决方案

我花了一段时间才弄清楚如何使用优秀的延迟加载图像React Lazyload 组件 https://github.com/jasonslyvia/react-lazyload.

演示在滚动时延迟加载图像，但在测试时我无法获得相同的行为。

罪魁祸首是overflow: auto;这与按预期工作的组件相冲突。

在 React 中延迟加载大型图片库/幻灯片的最佳方法是什么？

反应延迟加载 https://github.com/jasonslyvia/react-lazyload（真的很喜欢这个组件，但想研究其他组件）

反应虚拟化 https://github.com/bvaughn/react-virtualized（看似沉重但功能丰富）

反应无限 https://github.com/seatgeek/react-infinite（由于复杂性，进入门槛较高）

反应惰性列表 https://github.com/bogdanpetru/react-lazylist（直接但不确定是否最适合图像）

其他的...？

我有一个通用/同构应用程序，因此由于窗口对象无法在服务器上使用，上述某些内容将被破坏。

如果您想要一个更简单的延迟加载解决方案并且不必使用其他人的包/代码，请尝试使用IntersectionObserver API.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

我写了一篇 Medium 文章，介绍如何使用它在 React 组件中延迟加载图像（实现与 vanilla JS 基本相同）。

https://medium.com/@parkjoon94/lazy-loading-images-intersectionobserver-8c5bff730920 https://medium.com/@parkjoon94/lazy-loading-images-intersectionobserver-8c5bff730920

您只需要这部分代码（上面文章的片段）：

this.observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      const { isIntersecting } = entry;
      if (isIntersecting) {
        this.element.src = this.props.src;
        this.observer = this.observer.disconnect();
      }
    });
  }, {}
);