延迟加载来自dangerouslySetInnerHTML的图像

Question

我使用dangerouslySetInnerHTML

将一堆图像加载到div中

<div dangerouslySetInnerHTML={{__html: "<div><img /><img /><img /></div"}} />

我要做的是延迟加载图像以提高性能。我尝试了一些像react-lazyload这样的软件包，但是这样看起来并不是很懒。如果我将HTML字符串拉入React组件，它确实有效。

从dangerouslySetInnerHTML加载的图片如何延迟加载？我怎么能懒得加载图片呢？

Answer 1

如果您想要一个简单（且“安全”）的延迟加载解决方案，而不必使用其他人的软件包/代码，请尝试使用IntersectionObserver API。

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

我写了一篇有关如何使用它在React组件中延迟加载图像的中型文章（实现与香草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();
      }
    });
  }, {}
);