Image Lazy Loading 실제로 적용하기 | Lazy Loading 의 한계

lmage Lazy Loading은 페이지 안에 있는 이미지들을 바로 보여주는게 아닌 화면에 보일 필요가 있을 때 로딩 하는 테크닉이다.

Image Lazy Loading 구현 방법

---

1. javaScript 이벤트 이용하여 구현
2. Intersection Observer API 사용
3. 브라우저 Native Lazy Loading 이용 => loading 속성 이용

브라우저 Native Lazy Loading 예시

---

LazyImage Component 생성

import { useEffect, useState } from "react";

const LazyImage = ({ url, alt }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [opacity, setOpacity] = useState("opacity-0");

  useEffect(() => {
    isLoading ? setOpacity("opacity-0") : setOpacity("opacity-100");
  }, [isLoading]);
  return (
    <>
      {isLoading && (
        <div className="absolute h-full z-10 w-full flex items-center justify-">
          ...loading
        </div>
      )}
      <img
        src={url}
        alt={alt}
        width="100%"
        height="auto"
        loading="lazy"
        onLoad={() => setIsLoading(false)}
        className={`object-contain h-full ${opacity}`}
      />
    </>
  );
};

export default LazyImage;

isLoading의 상태값에 따라 opacity 조절하며 loading 메세지를 출력하고 이미지가 완전히 Load 되었으면 isLoading 을 false로 변경하여 loading 메세지가 사라지도록 만들었다.

loading lazy 적용 결과

loading 속성 때문에 뷰포트에 해당 이미지가 보이는 순간 이미지 받아오는 요청을 보내는 모습을 확인할 수 있다.

loading lazy 속성의 한계

뷰포트 안으로 들어온 지연 로딩 이미지 개별로는 로딩되지 않는다.
loading 속성을 이용한 지연 로딩은 페이지 안에 지연 로딩된 이미지가 여러 개일 경우 첫 번째 지연 로딩 이미지가 뷰포트 안으로 들어오면 페이지 안의 모든 지연 로딩된 이미지들이 한꺼번에 로딩된다.