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

Question

我花了一些时间来弄清楚如何使用优秀的React Lazyload组件延迟加载图像.

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

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

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

React Lazyload(真的喜欢这个组件,但想调查其他人)

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

React Infinite(由于复杂性,进入门槛较高)

React Lazylist(直接向前但不确定图像是否最佳)

其他...？

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

Answer 1

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

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

Answer 2

我是React Lazy Load Image Component的作者，它应该可以很好地与同构应用程序配合使用。