LazyLoad vs PreLoad

LazyLoad vs PreLoad

LazyLoad

스크롤이 내려감에 따로 필요한 이미지들을 조금씩 다운 받는다. react-lazy-load 라이브러리 사용해서 구현할 수 있다.

PreLoad

다른 페이지에 있을 때 크기가 큰 이미지를 미리 다운 받아 대기했다가 사용자가 이미지가 있는 페이지를 클릭하면 로딩 없이 이미지를 보여준다.

useEffect(() => {
    const img = new Image();
    img.src =
      "이미지 주소";
    img.onload = () => {
      // 이미지가 전부 로딩되면 setImgTag 에 저장
      setImgTag(img); // imgTag 는 이미지가 다운로드 된 이미지 태그가 된다
    };
  }, []);