Медленное рендеринг изображения в реакции - PullRequest
Новая
       8

Медленное рендеринг изображения в реакции

0 голосов
/ 21 марта 2020

У меня есть такой вид пользовательского интерфейса

sample

Поэтому, когда вы нажимаете на небольшую вертикальную плитку, она меняет sr c большое изображение. И когда это происходит, мой образ так медленно отображается. Да, я использую большое изображение здесь, но для целей тестирования. Я думаю, что я должен обработать этот случай тоже и показать изображение, когда оно полностью готово для отображения.

Вот несколько примеров кода:

Вертикальный компонент 

<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. Например, для его отображения используются изображения [индекс]. 

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

Так что вопрос в том, как я могу отобразить изображение, когда он полностью готов?

PS: я использую реагирующее изображение для компонента Img

...