Javascript 加载下一个图像时，上一个图像保持不变

快速演示：

请注意，切换图像时，与下一个图像相关的文本会立即显示，但随着下一个图像的加载，上一个图像会一直保留在那里，直到下一个图像尚未完全加载

最初，用户看到：

Text 1
[             ]
[    Image1   ]
[             ]

切换时，加载下一个图像需要一些时间，因此用户可以看到

Text 2
[             ]
[    Image1   ]
[             ]

然后呢,

Text 2
[             ]
[    Image2   ]
[             ]

理想情况下，我希望在加载下一个图像时清除上一个图像。有办法做到这一点吗？ 也就是说，在加载下一个图像时，用户应该看到

Text 2
[             ]
[             ]
[             ]

显然，这只在第一次加载图像时发生。获取图像后（我猜是存储在会话缓存或其他东西中），切换图像时不会有延迟。

请这样尝试

<div style={{ minHeight: "100px" }}>
      {item===0 && <img style={{ maxWidth: "200px" }} src={images[0].url} alt="" />}
      {item===1 && <img style={{ maxWidth: "200px" }} src={images[1].url} alt="" /> }
</div>

{item==0&&}
{item===1&&}

你可以在这里聊天

---

获取图像需要时间。您可以将图像置于状态（useState（[]），并在useEffect挂钩或函数中获取图像，然后使用加载状态。在获取图像之前，请将加载设置为true。当加载为true时，您可以显示空白或任何内容来代替图像。这样您只需获取图像一次。

您可以获取另一个状态变量

  const [show, setShow] = useState(false);

然后将handleImageSwitch功能更改为

const handleImageSwitch = () => {
    setShow(false);
    item === 0 ? setItem(1) : setItem(0);
  };

将您的图像标记更改为此

<img
  onLoad={() => setShow(true)}
  style={{
    maxWidth: "200px",
    display: show ? "block" : "none",
    margin: "0 auto"
  }}
  src={images[item].url}
  alt=""
/>

检查我的沙盒：