加载= "lazy" 在 CSS 或 JS 中 (反应)

Question

我使用的是react图像库https://www.npmjs.com/package/react-image-gallery，我无法访问我的图像的html，我需要它们在loading="lazy"中。是否可以像一样在CSS中提供它

img {loading:lazy}

还是在JS中？

我在react图片库和中尝试了lazyLoad={true}道具

useEffect(() => {
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
console.log("aaa");
imgs[i].setAttribute("loading", "lazy");
}
}, [])

使用或不使用效果

他们没有帮助console.log显示我只有21个图像，但我有更多的图像，所以它不起作用：/

我有一个非常大的项目，所以我不能把代码放在这里，但这里重要的部分是react-image-gallery

Answer 1

尝试react-lazyload它将延迟加载其中的任何组件，不管它是库、整个组件还是任何东西https://www.npmjs.com/package/react-lazyload

Answer 2

延迟加载是一种在用户需要时加载图像的方法，即在滚动时加载图像。由于您已经在DOM树上收到了图像，所以效果不会起作用——这是隐含的。您必须有访问html标记的权限才能使用lazylod。

我不完全确定，即使你在挂载前对其进行useEffect，它也会起作用：

useEffect(() => {
}) // notice: second parameter is removed