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

Question

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

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

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

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

React Lazyload （非常喜欢这个组件但想研究其他组件）

React Virtualized （看似笨重但功能丰富）

React Infinite （由于复杂性，进入门槛更高）

React Lazylist （直接但不确定是否最适合图像）

其他…？

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

原文由 Vladimir Ramik 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 jay p 发布，翻译遵循 CC BY-SA 4.0 许可协议