Image lazy loading 수정

플레이리스트에 담기는 곡이 많게 되면 처음에 로딩될 때 불러올 이미지의 갯수도 많아지게 되면서
속도가 느려지게 되어 Image lazy loading을 적용했었다.

https://velog.io/@jiseong/useRef-with-useEffect-%EA%B7%B8%EB%A6%AC%EA%B3%A0-Image-lazy-loading-%EC%A0%81%EC%9A%A9

수정 전

기존에 구현했던 방식은 깜빡이는 효과를 주는 default 이미지를 넣어놓고 viewport에 들어오게 될 때 src를 변경해주는 방식이였다.
그런데 사용하다보니 다른 페이지에서 다시 돌아오면 src가 변경되는 잠깐 사이에 default 이미지가 너무 눈에 띄게 보이게되어 아쉬움이 있었다.

수정 후

더 좋은 방법들도 있겠지만 default 이미지를 없애버리고 공간만 차지할 수 있도록 처음에 visibility를 이용하여 숨기고 viewport 내부에 들어오게 될 때 다시 보여주는 방식으로 수정하였다.

function LazyImage({ src, alt }: Props) {
  const ref = useIntersection({
    callback: (
      entries: IntersectionObserverEntry[],
      io: IntersectionObserver,
    ) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const lazyImage = entry.target as HTMLElement;
          lazyImage.setAttribute('src', src);
          lazyImage.setAttribute('alt', alt);
          lazyImage.style.visibility = 'visible';

          io.unobserve(entry.target);
        }
      });
    },
    threshold: 0.5,
  });

  return <Img ref={ref} />;
}

export default LazyImage;

이렇게 수정하고나니 페이지 이동간에 부자연스러웠던 현상이 해결되었다 👍