时间戳

首页 > 解决方案 > 上一个图像在下一个加载时保留

javascript - 上一个图像在下一个加载时保留

问题描述

快速演示：Codesandbox 链接

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

最初，用户看到：

Text 1
[             ]
[    Image1   ]
[             ]

在切换时，下一张图片需要一些时间来加载，所以用户看到

Text 2
[             ]
[    Image1   ]
[             ]

接着，

Text 2
[             ]
[    Image2   ]
[             ]

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

Text 2
[             ]
[             ]
[             ]

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

标签： javascriptreactjs

解决方案

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

  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

推荐阅读