检查用于背景图像的图像是否已使用 new Image() 加载？答案

【问题标题】：Checking to see if image to be used for background-image has loaded using new Image()?检查用于背景图像的图像是否已使用 new Image() 加载？
【发布时间】：2019-12-17 03:53:54
【问题描述】：

我正在尝试为@material-ui 的<CardMedia/> 组件触发onLoad 事件。默认情况下，它会将div 中的图像加载为background-image。虽然它确实有一个设置 img 组件的选项 - 您不能定义自定义 img 组件，它也不会公开 Img 道具。只需要一个媒体src。

这使得（对我来说）检查图像上的 onLoad 事件变得很困难。

我的第一个想法是使用new Image() 加载图像，然后在<CardMedia /> 组件中重新使用该图像的src。这是有效的代码还是我只是加载了两次相同的图像？

例如，

https://codesandbox.io/s/cardmedia-onload-tuqru

快速浏览：

...

const handleImageLoaded = () => setImgIsLoading(false);

useEffect(() => {
    const image = new Image();
    image.onload = handleImageLoaded;
    image.src = src ? `/t/width=500/matte=none/scale/f${src}/scaled.jpg` : undefined;
    setImg(image);
}, []);

return (
    <div className={classes.root}>
        <div className={classes.itemRoot}>
            {imgIsLoading && <Skeleton variant="rect" className={classes.skeleton} />}
            {!imgIsLoading && (
                <img
                    src={img.src}
                    alt={alt}
                />
            )}
        </div>
    </div>
);

...

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我会说它是有效的，因为无论您有多少具有相同 URL 的图像对象实例，相同的图像 URL 只会加载一次。

【讨论】：