在反应中缓慢渲染图像

Question

我有这种用户界面

所以当你点击一些垂直的小瓷砖时，它会改变大图像的 src。当这种情况发生时，我的图像渲染得如此缓慢。是的，我在这里使用大图像但用于测试目的。我想我也应该处理这种情况，并在完全准备好显示时显示图像。

这是一些代码示例：

垂直分量

<div>
    {images.map((img, index) => ( //images are coming from props
      <Button onClick={() => handleImageChange(index)}>
         <Img src={img}/>
       </Button>
    ))}
</div>

水平组件

<div>
   {images.length ? ( //images coming from props
      <Img src={images[activeImageIndex]}/>
   ) : (
      <Skeleton variant="rect" animation="wave"/>
   )}
</div>

例如，这些图块的点击事件只是将索引从 0 更改为 1 并获取图像 [index] 来显示它。

const activeImageIndex = useSelector((state) => state.gdp.activeImageIndex);
const handleImageChange = (index) => {
  dispatch(setActiveImageIndex(index));
};

所以问题是当图像完全准备好时如何显示图像？

PS：我正在为 Img 组件使用 react-image