Reactjs 从危险的HTML延迟加载图像

我有一个HTML，使用

DangerlySetinerHTML

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

我试图做的是延迟加载图像以提高性能。我尝试了一些软件包，例如，但这样加载图像似乎并不懒惰。如果我将HTML字符串拉入React组件，它确实起作用

延迟加载如何处理从

危险的HTML

加载的图像？如何延迟加载图像？

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

IntersectionObserver

API

我写了一篇关于如何使用它在React组件中延迟加载图像的中级文章（实现与vanillajs基本相同）

您只需要这部分代码（上面文章的片段）：

---

为什么您需要危险的LySetinerHTML？因为内容是由用户生成的，并以字符串形式存储在数据库中，所以可能无法实现它

this.observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      const { isIntersecting } = entry;
      if (isIntersecting) {
        this.element.src = this.props.src;
        this.observer = this.observer.disconnect();
      }
    });
  }, {}
);