javascript - React 懒加载/无限滚动解决方案

Question

我花了一段时间才弄清楚如何使用出色的 React Lazyload component 延迟加载图像.

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

罪魁祸首是 overflow: auto;，它与按预期工作的组件发生冲突。

What is the best way to lazy load large image gallery/slideshows in React?

React Lazyload (真的很喜欢这个组件但想研究其他组件)

React Virtualized (看似沉重但功能丰富)

React Infinite (由于复杂性较高的进入阈值)

React Lazylist (直截了当但不确定是否最适合图像)

其他...？

我有一个通用/同构应用程序，所以上面的一些应用程序会由于无法在服务器上使用窗口对象而中断。

Answer 1

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

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

我写了一篇关于如何使用它在 React 组件中延迟加载图像的 Medium 文章(实现与 vanilla JS 基本相同)。

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();
      }
    });
  }, {}
);