반응하는 이미지의 느린 렌더링

반응하는 이미지의 느린 렌더링

나는 이런 UI를 가지고 있다.

그래서 당신이 몇몇 세로 작은 타일을 클릭하면 큰 이미지의 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로 변경하고 이미지[인덱스]를 사용하여 표시할 수 있다.

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

그렇다면 문제는 이미지가 완전히 준비되었을 때 어떻게 표시할 수 있는가 하는 것이다.

PS: Img 컴포넌트에 react-image를 사용하고 있다.

참조URL: https://stackoverflow.com/questions/60782997/slow-rendering-of-image-in-react