LazyLoad vs PreLoad

LazyLoad

웹에서 페이지에 들어갔을 때 페이지에 존재하는 모든 이미지를 불러오면
이미지의 양이 많을 수록 혹은 용량이 클 수록 그 속도가 느려지게 된다.

그래서 사용자가 현재 보고있는 화면에 해당하는 이미지만 그 때 그 때
불러와서 보여주면 속도를 향상시킬 수 있는데 이 기술이 LazyLoad이다.

• LazyLoad 예제

import LazyLoad from "react-lazy-load";
import styled from "@emotion/styled";

const Wrapper = styled.div`
  margin-left: 20px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

export default function ImageLazyLoadPage() {
  return (
    <Wrapper>
      Scroll to load images.
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/19/08/32/relax-7142183__480.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/24/16/01/beach-7153932__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/21/20/49/road-7148369__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/21/19/47/lion-7148207__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/19/08/32/relax-7142183__480.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/03/08/15/44/boy-7056003__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/23/17/16/cascade-7152189__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/05/19/27/penguin-7114280__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/04/11/09/32/glacier-7125359__340.jpg" />
      </LazyLoad>
      <div className="filler" />
      <LazyLoad width={500} height={500}>
        <img src="https://cdn.pixabay.com/photo/2022/03/30/15/52/gerbera-7101430__340.jpg" />
      </LazyLoad>
    </Wrapper>
  );
}

• LazyLoad 예제 확인

---

PreLoad

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

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

• PreLoad 예제

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

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

  useEffect(() => {
    const img = new Image();
    img.src =
      "https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  const onClickPreload = () => {
    if (imgTag) divRef.current?.appendChild(imgTag);
  };

  return (
    <div>
      <div ref={divRef}></div>
      <button onClick={onClickPreload} style={{ color: "#ff2900" }}>
        이미지 보여주기
      </button>
    </div>
  );
}

• PreLoad 예제 확인