Lazyload

Lazyload : 웹사이트를 키면 보여지는 부분이 있고 스크롤을 내리면 더 보여준다.
이때 밑에있는 이미지를 다운받지 않고, 스크롤을 내릴 때 이미지를 받아 오게 하는 것이 lazyload이다.

lazyload 예제

import LazyLoad from "react-lazy-load";

export default function index() {
  return (
    <div>
      Scroll to load
      <div>
        <LazyLoad height={762} offsetVertical={300}>
          <img src="http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg" />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad height={683} offsetTop={200}>
          <img src="http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg" />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad height={480} offsetHorizontal={50}>
          <img src="http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif" />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad
          height={720}
          onContentVisible={() =>
            console.log("look ma I have been lazyloaded!")
          }
        >
          <img src="http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg" />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad
          height={720}
          onContentVisible={() =>
            console.log("look ma I have been lazyloaded!")
          }
        >
          <img src="https://cdn.pixabay.com/photo/2022/05/13/15/46/flower-7194038__340.jpg" />
        </LazyLoad>
      </div>
      <div>
        <LazyLoad
          height={720}
          onContentVisible={() =>
            console.log("look ma I have been lazyloaded!")
          }
        >
          <img src="https://cdn.pixabay.com/photo/2022/06/13/12/19/sea-7259914__340.jpg" />
        </LazyLoad>
      </div>
    </div>
  );
}

PreLoad

PreLoad는 사용자가 페이지에 들어오면 사진을 미리 다운 받아놓고 기다리다가,
사용자에게 사진을 보여줄 때 미리 받아놓은 사진을 보여주는 기술이다.

react에서는 useEffect를 통해 이를 구현할 수 있다.

import { useEffect, useRef, useState } from "react";

export default function ImagePreloadPage() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [imgTag, setImgTag] = useState<HTMLImageElement>();
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const img = new Image();
    img.src =
      "https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  const onClickPreload = () => {
    // document.getElementById("aaa")?.appendChild(imgTag)
    if (imgTag) divRef.current?.appendChild(imgTag);
  };

  const onClickLoad = () => {
    setIsLoaded(true);
  };
  return (
    <div>
      <div ref={divRef}></div>
      <button onClick={onClickPreload}>이미지 프리로드</button>
      ==========================================================
      {isLoaded && (
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/%22Den_kjekke_gutt%22_-_6._Internasjonale_Akademiske_Vinterleker_%281939%29_%2840200856483%29.jpg" />
      )}
      <button onClick={onClickLoad}>이미지 일반로드</button>
    </div>
  );
}