在 CSS 或 JS (React) 中加载 =“lazy”

Question

我正在使用 react-image-gallery https://www.npmjs.com/package/react-image-gallery并且我无法访问我的图像的 html 我需要它们在loading="lazy"是否有可能在 CSS 中给它像

img {loading:lazy}

或以某种方式在 JS 中？

我在 react-image-gallery 中尝试了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 标记才能使用延迟加载。

即使您在挂载之前执行 useEffect ，我也不确定它是否会起作用：

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