前一个图像保留，而下一个图像正在加载

Question

快速演示：Codesandbox link

请注意，当切换图像时，与下一张图像相关的文本会立即出现，但在加载下一张图像时，前一张图像会一直留在那里，直到下一张图像尚未完全加载。

最初，用户会看到：

Text 1
[             ]
[    Image1   ]
[             ]

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

Text 2
[             ]
[    Image1   ]
[             ]

然后,

Text 2
[             ]
[    Image2   ]
[             ]

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

Text 2
[             ]
[             ]
[             ]

显然，这只会在第一次加载图像时发生。在获取图像之后(我猜存储在会话缓存或其他地方)，当图像切换时不会有延迟。

Answer 1

您可以使用另一个状态变量

  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=""
/>

查看我的沙盒：https://codesandbox.io/s/affectionate-goldwasser-fbr3c?file=/src/App.js

Answer 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>

你可以在这里结交朋友。

https://codesandbox.io/s/modest-poitras-4ttp0?file=/src/Carousel.js:598-669

Answer 3

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