反应中图像渲染缓慢

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>

例如，这些磁贴的on click事件只是将索引从0更改为1，并使用images [index]进行显示。

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

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

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