Javascript 预加载图像未在useEffect中工作

我试图在

useffect

中预加载一个图像，但在安装应用程序组件时，它似乎没有下载图像

我正在做如下的事情：

export default function App() {
  const [show, setShow] = React.useState(false)

  React.useEffect(() => {
    const image = new Image();
    image.src =
      "https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1279&q=80";

    setTimeout(() => setShow(true), 10000)
  }, [])

  return (
    <>
      {show && (<img src="https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1279&q=80 />)}
    </>
  )

导出默认函数App（）{
const[show，setShow]=React.useState（false）
React.useffect（（）=>{
常量图像=新图像（）；
image.src=
"https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1279&q=80“；
setTimeout（（）=>setShow（true），10000）
}, [])
返回(
{show&&（）}
)

这里的想法是提前下载图像，这样当显示

img

时，就不必下载媒体

不幸的是，

useffect

似乎没有触发映像下载。为什么在安装组件时它不获取映像

---

您有一个名为

Image

的组件，因此当您调用

new Image（）

时，您调用的是组件的一个新实例，使得本机

Image

构造函数无效。因此，您必须使用

文档

对象上的

createElement

函数来构建图像

然后，不要使用

setTimeout

来监听

load

事件，而是在图像加载完成时更改

show

状态

import React from "react";
import Image from "./Image";
import "./styles.css";

export default function App() {
  const [show, setShow] = React.useState(false);

  React.useEffect(() => {
    const image = document.createElement("img");
    image.src =
      "https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1279&q=80";
    image.onload = () => {
      setShow(true);
    };
  }, []);

  return <div className="App">{show && <Image />}</div>;
}

从“React”导入React；
从“/Image”导入图像；
导入“/styles.css”；
导出默认函数App（）{
const[show，setShow]=React.useState（false）；
React.useffect（（）=>{
const image=document.createElement（“img”）；
image.src=
"https://images.unsplash.com/photo-1601758065893-25c11bfa69b5?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=1279&q=80“；
image.onload=（）=>{
设置显示（正确）；
};
}, []);
返回{show&&}；
}

你想说什么不清楚我想做的是。预加载/延迟加载映像，这样当组件需要使用它时它就准备好了。因为现在，只有当

show===true

并且

在DOM中时，映像才会被下载。为什么你先预加载一个映像，然后再显示另一个映像有问题的adedType进行了修复