从dangerouslySetInnerHTML延迟加载图像

Question

我有一个超文本标记语言与一堆图片加载到一个使用dangerouslySetInnerHTML的div

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

我试图做的是懒惰地加载图像以提高性能。我尝试了几个包，如react-lazyload，但它似乎并不懒惰地以这种方式加载图像。如果我将HTML字符串拉到React组件中，它确实可以工作。

惰性加载是如何处理从dangerouslySetInnerHTML加载的图像的？我如何延迟加载图像呢？

Answer 1

如果您想要一个简单(并且“安全”)的延迟加载解决方案，并且不需要使用其他人的包/代码，那么可以尝试使用IntersectionObserver应用编程接口。

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

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