从危险的HTML延迟加载图像

Question

我有一个HTML，使用DangerlySetinerHTML

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

我想做的是懒惰加载图像的性能。我尝试了几个包，如react-lazyload，但它似乎并没有懒惰加载图像的方式。如果我将超文本标记语言字符串拉到React组件中，它确实有效。

延迟加载如何处理从危险的HTML加载的图像？我怎样才能懒散地加载图像？

Answer 1

如果您想要一个简单（并且安全）的延迟加载解决方案，并且不必使用其他人的包/代码，请尝试使用Intersection观察员API。

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

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