如何查看图片是否已加载？

Question

我正在制作一个可以有儿童道具的卡鲁塞尔组件。在这种情况下我使用图像

`            <Carroussel counter='Foto' className={"room-carroussel"}>
                {extraImages.urls.map((url, index) => (
                    <img
                        key={index}
                        src={`images/${url}`}
                        alt={`Image ${index}`}
                    />))}
            </Carroussel>`

但是如果正在加载图像，我如何设置某些加载状态。目前，carroussel 会删除具有正确索引的图像并将其添加到 dom 中。

`
            <AnimatePresence mode="popLayout" initial={false} custom={direction}>
                <motion.div
                >
                    {React.Children.toArray(children)[pageIndex]}
                </motion.div>
            </AnimatePresence>`

我如何知道图像或其他相关内容是否已加载？

我环顾四周，只能找到 onload 属性，但我不确定如何将其链接到我的卡鲁塞尔？？？

Answer 1

图像有

onLoad

事件。您可以使用它们来跟踪加载的图像数量。

const [count, setCount] = useState(0);
const [loading, setLoading] = useState(true);

useEffect(() => {
    let TOTAL_IMAGES = 10;
    if (count === TOTAL_IMAGES) setLoading(false);
}, [count])


return (
    <Carroussel counter='Foto' className={"room-carroussel"}>
        {extraImages.urls.map((url, index) => (
            <img
                key={index}
                src={`images/${url}`}
                alt={`Image ${index}`}
                onLoad={setCount(count + 1)}
            />
        ))}
    </Carroussel>
)