loading="lazy" in CSS 或 JS (React)

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} props 并且

    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

延迟加载是一种在用户需要时加载图像的方式，即。在卷轴上。因为，您已经在 DOM 树上收到图像，所以效果不会起作用 - 它是隐含的。您必须有权访问 html 标记才能使用延迟加载。

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

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

Answer 2

试试 react-lazyload 它会延迟加载其中的任何组件，无论是画廊、整个组件还是任何东西都无所谓 https://www.npmjs.com/package/react-lazyload

loading="lazy" in CSS 或 JS (React)

loading="lazy" in CSS or JS (React)

html

javascript

css

lazy-loading

reactjs