CSS或JS中的loading =“ lazy”反应

编程问答 2022-08-12

问题描述

我正在使用react-image-gallery https://www.npmjs.com/package/react-image-gallery，但是我无法访问loading="lazy"中需要它们的图像的html，是否可以在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张图像，但是我还有更多，因此它不起作用：/

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

解决方法

尝试react-lazyload，它将延迟加载其中的任何组件，而无论是画廊，整个组件还是其他任何组件都没关系 https://www.npmjs.com/package/react-lazyload

,

延迟加载是一种在用户需要图像时即加载图像的方法。在滚动。由于您已经在DOM树上收到了图像，因此效果不起作用-它是隐式的。您必须有权访问html标记才能使用lazyload。

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

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