[React] Blur 효과를 활용한 이미지 지연 로딩 Image Lazy Loading

블러 placeholder를 사용한 Lazy Loading(GIF 화질 때문에 블러 이미지가 뭉개져서 보이는 점 참고)

웹페이지에서 성능에 영향을 가장 많이 주는 부분이 이미지 / 비디오 같은 미디어 요소다. 특히 이미지는 배너, 제품 사진, 로고 등 페이지 구석구석에서 사용한다. HTTP Archive Data에 따르면 전체 웹페이지 용량의 45%를 이미지가 차지한다고 한다. 이미지를 사용하지 않는건 불가능하지만, 화면에 노출될 때만 이미지를 불러오는 방식으로 페이지 로딩 시간을 단축시킬 수 있다. 이런 방식을 Lazy Loading이라고 한다.

 

Lazy Loading 구현 방법

---

💡 Lazy Loading이 적용된 이미지가 뷰포트에 근접해서 이미지를 로드하면 콘텐츠가 밀려나는 현상이 발생한다. 이를 방지하려면 이미지를 감싸는 컨테이너 요소에 높이 / 너비를 지정하면 된다.

 

Lazy Loading은 크게 Chrome Native 방식과 JavaScript를 이용한 방식으로 구현할 수 있다.

 

(1) Native Lazy Loading 방식

Chrome 76 버전 이상부터 Native 방식의 Lazy Loading을 지원한다. 적용할 이미지 태그의 loading 속성에 lazy만 추가하면 된다. 사용법은 간단하지만 76버전 이상의 크롬 브라우저에서만 적용되는 단점이 있다.

<img src="example.jpg" loading="lazy" width="200" height="200" alt="..." />

 

• lazy : 뷰포트와 근접했을 때만 이미지 로드 — Lazy Loading
• eager : 뷰포트와 상관없이 모든 이미지 로드
• auto : loading 속성을 사용하지 않았을 때의 기본값으로 lazy 속성을 적용한 것과 동일.

 

(2) JavaScript 활용 방식

이미지 태그의 src 속성엔 로딩 전 보여질 placeholder 이미지를 추가해두고, 데이터 프로퍼티를 이용해 원본 이미지를 data-src 속성에 할당해둔다. 이미지 태그가 화면에 노출되면 data-src 속성에 지정해놓은 원본 이미지를 src 속성에 할당해서 원본 이미지를 로드한다.

<!-- 화면 노출 전 -->
<img data-src="원본 이미지 주소" src="placeholder 이미지 주소" />

<!-- 화면 노출 후 -->
<img data-src="원본 이미지 주소" src="원본 이미지 주소" />

 

위 방식을 구현하려면 이미지 태그의 화면 노출 여부를 확인해야된다. 구현 방법은 아래 2가지가 있다.

 

Scroll 이벤트 + 기하 프로퍼티 활용

스크롤 이벤트가 발생할 때마다 요소가 화면에 노출됐는지 확인하는 방식. getBoundingClientRect 메서드를 호출해서 뷰포트 기준의 요소 위치 좌표값을 얻어야 한다. 이 메서드를 호출할 때마다 리플로우가 발생하는 단점이 있으며, 마우스를 스크롤할 때마다 이벤트가 계속 호출되므로 스로틀도 적용해야 된다.

// 코드 참고 via StackOverFlow
// 요소가 화면에 완전히 들어왔는지 확인하는 함수
function checkInView(el) {
  // 주어진 요소의 뷰포트 기준 위치 및 크기 반환
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 && // 뷰포트 상단보다 아래 있는지 여부
    rect.left >= 0 && // 뷰포트 왼쪽보다 오른쪽에 있는지 여부
    rect.bottom <= window.innerHeight && // 뷰포트 하단 이내에 있는지 여부
    rect.right <= window.innerWidth // 뷰포트 오른쪽 이내에 있는지 여부
  );
}

window.addEventListener('scroll', () => {
  document.querySelectorAll('.lazy-img').forEach((image) => {
    if (checkInView(image)) {
      image.src = image.dataset.src; // 이미지 태그가 화면에 노출되면 src 속성에 원본주소 할당
    }
  });
});

이미지 출처 JavaScript Info

 

Intersection Observer API 활용 ⭐️

💡 Intersection Observer API와 관련한 더 자세한 내용은 링크 참고

 

Intersection Observer는 요소가 화면에 노출됐는지 알려주는 API다. 비동기로 작동하고 메인 스레드에 영향을 주지 않기 때문에 성능면에서 더 유리하다. 사용법도 간단하다. Lazy Loading 적용 태그를 IO의 관찰 대상으로 등록하고, 해당 태그가 화면에 노출되면 src 속성에 원본 주소를 할당한 뒤 관찰을 해제하면 된다.

const ioHandler = (entries, io) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src; // src 속성에 원본 주소 할당
      io.unobserve(entry.target); // 화면에 노출돼서 원본 이미지를 로드했으므로 관찰 해제
    }
  });
};

const observer = new IntersectionObserver(ioHandler); // IO 인스턴스 생성
document.querySelectorAll('.lazy-img').forEach((el) => observer.observe(el)); // 관찰 대상 등록

 

IO API 활용해서 구현하기

---

이미지 API

Lorem Picsum는 Unsplash의 일부 이미지를 가져와서 제공하는 무료 API다. 이미지 사이즈 지정, 흑백 / 블러 효과, 랜덤 이미지 등의 기능을 제공한다. Lorem Picsum에선 이미지 리스트도 제공하는데 이를 이용하면 무한스크롤 + Lazy Loading을 구현하기 딱 적당하다. 페이지별로 호출할 수 있으며 1개 페이지에 몇개의 이미지 정보를 받아올지도 정할 수 있다.

# API 주소 예시
https://picsum.photos/v2/list?page=2&limit=100 [이미지 리스트]
https://picsum.photos/200/300/?blur=2 [블러 효과가 적용된 200x300 이미지]
https://picsum.photos/id/237/200/300 [ID가 237인 200x300 이미지]

// 이미지 리스트 GET 200 OK
[
  {
    "id": "0",
    "author": "Alejandro Escamilla",
    "width": 5616,
    "height": 3744,
    "url": "https://unsplash.com/...",
    "download_url": "https://picsum.photos/..."
  }, 
]

 

IO Custom Hook

Intersection Observer API는 무한 스크롤은 물론 Lazy Loading, 광고 가시성 확인 등 다양한 곳에서 사용하므로 커스텀 Hook으로 분리해서 재사용하면 좋다. 커스텀 Hook의 인자는 아래 3개를 받도록 작성한다. 함수 호출시 인자 순서에 구애받지 않도록 RORO 패턴으로 작성한다.

 

1. callback : 교차 상태에서 실행할 로직이 담긴 콜백 함수
2. unObserver : 교차 상태 후 해당 타겟의 관찰을 중지할지 여부. true | false
   💡 무한스크롤은 교차 상태 이후에도 가장 하단의 빈 요소를 계속 관찰해야 하지만(false), Lazy Loading 등을 구현할 땐 이미 화면에 노출돼서 이미지를 로드한 상태면 더이상 관찰할 필요가 없다(true).
3. options : Intersection Observer 인스턴스 생성 시 넘길 옵션

 

커스텀 Hook은 Ref 객체를 반환하도록 한다. 그럼 Hook을 호출하는 컴포넌트에서 Ref 객체를 받은 뒤 관찰하고 싶은 컴포넌트의 ref 속성에 바로 할당하면 된다. 사용하기 더 편하다.

// 코드 일부 참고 : https://mrcoles.com/intersection-observer-react-hook/
import { useCallback, useEffect, useRef } from 'react';

export default function useIntersectionObserver({
  callback,
  unObserve = false,
  options = {
    root: null, // 노출&비노출 여부를 어떤 요소를 기준으로 할지 지정하는 옵션. 기본값 null(뷰포트)
    rootMargin: '0px', // 바깥 여백(Margin)을 이용해 Root 범위를 확장/축소하는 옵션. 기본값 0px
    threshold: 0, // 화면에 얼만큼 노출돼야 콜백 함수를 호출할지 결정하는 옵션. 기본값 0(1px 라도 화면에 보이면 콜백 호출)
  },
}) {
  const ioRef = useRef(null);

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const ioHandler = useCallback((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 화면 안에 타겟 요소가 들어왔는지 체크
        callback(); // 교차 시점에(관찰 대상이 뷰포트에 노출) 인자로 받은 콜백 호출
        if (unObserve) observer.unobserve(entry.target); // (조건 만족시) 해당 타겟은 관찰 중지
      }
    });
  }, []);

  useEffect(() => {
    if (window.IntersectionObserver) {
      const observer = new IntersectionObserver(ioHandler, options); // 콜백&옵션 등록 및 IO 객체 생성
      observer.observe(ioRef.current); // 인자로 넘긴 요소를 관찰 대상으로 등록

      return () => observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
    }
  }, []);

  return ioRef;
}

// 코드 일부 참고 : https://mrcoles.com/intersection-observer-react-hook/
import { useCallback, useEffect, useRef } from 'react';

interface IOProps {
  callback: VoidHandler;
  unObserve?: boolean;
  options?: IntersectionObserverInit;
}

export default function useIntersectionObserver<T extends HTMLElement>({
  callback,
  unObserve = false,
  options = {
    root: null, // 노출&비노출 여부를 어떤 요소를 기준으로 할지 지정하는 옵션. 기본값 null(뷰포트)
    rootMargin: '0px', // 바깥 여백(Margin)을 이용해 Root 범위를 확장/축소하는 옵션. 기본값 0px
    threshold: 0, // 화면에 얼만큼 노출돼야 콜백 함수를 호출할지 결정하는 옵션. 기본값 0(1px 라도 화면에 보이면 콜백 호출)
  },
}: IOProps) {
  const ioRef = useRef<T>(null);

  // Intersection Observer 콜백 정의(useCallback 적용은 选项)
  // (인자1) entries: 관찰 중인 모든 대상이 담긴 배열, (인자2) observer: 관찰자 객체
  const ioHandler: IntersectionObserverCallback = useCallback(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 화면 안에 타겟 요소가 들어왔는지 체크
          callback(); // 교차 시점에(관찰 대상이 뷰포트에 노출) 인자로 받은 콜백 호출
          if (unObserve) observer.unobserve(entry.target); // (조건 만족시) 해당 타겟은 관찰 중지
        }
      });
    },
    [callback, unObserve],
  );

  useEffect(() => {
    if (!window.IntersectionObserver || !ioRef.current) return undefined;
    const observer = new IntersectionObserver(ioHandler, options); // 콜백&옵션 등록 및 IO 객체 생성
    observer.observe(ioRef.current); // 인자로 넘긴 요소를 관찰 대상으로 등록

    return () => observer.disconnect(); // 언마운트시 모든 요소에 대한 관찰 중지
  }, [ioHandler, options]);

  return ioRef;
}

 

(1) Single color Placeloader

회색 placeholder를 이용한 Lazy Loading

LazyImage 컴포넌트

Lazy Loading을 적용할 이미지는 LazyImage 컴포넌트로 분리한다. data-src에 원본 이미지 주소를 할당하고 화면에 노출됐을 때 src 속성으로 바꾸는 방법이 아닌, 화면 노출 여부를 isInView 상태에서 관리하도록 했다. 화면 노출전엔 이미지 태그를 감싸는 회색 배경의 부모 엘리먼트(placeholder)만 보이고, 화면에 노출 됐을 때 isInView 상태를 변경해서 이미지 태그를 보여주는 방식이다.

 

첫 화면엔 Lazy Loading 적용 없이 이미지를 바로 보여줘야 하므로 noLazy라는 props를 받아서 지연 로딩 여부를 판단할 수 있도록 했다(처음 5개 이미지는 noLazy로 설정했다).

// LazyImage.js
function LazyImage({ src, noLazy, details }) {
  const [isInView, setIsInView] = useState(!!noLazy);
  const [isLoaded, setIsLoaded] = useState(false);

  const imageRef = useIntersectionObserver({ // IO 커스텀 훅
    callback: () => setIsInView(true), // 관찰 대상이 화면에 노출되면 isInView 상태 변경
    unObserve: true, // 관찰 대상이 화면에 노출(교차)되면 이미지를 로드한 상태이므로 관찰 해제
    options: { rootMargin: '40%' }, // 스크롤이 하단에 도달했을즈음 다음 이미지를 미리 불러오기 위해 rootMargin 설정
  });

  const imgClasses = classnames(
    `transition-opacity ease-in-out ${!noLazy && 'duration-1000'}`,
    // 이미지 서서히 보이는 효과 ('opacity-0': !isLoaded 만 입력해도 작동함)
    { 'opacity-100': isLoaded, 'opacity-0': !isLoaded },
  );

  return (
    <div
      ref={imageRef} // IO 커스텀 훅이 반환한 ref 객체 할당
      className="bg-gray-200 w-4/6 aspect-[5/3] rounded-md overflow-hidden"
      // 이미지를 감싸는 컨테이너 요소에 너비/높이를 지정해서 이미지 로딩시 밀림 현상을 방지한다
    >
      {isInView && (
        <img
          className={imgClasses}
          src={src}
          onLoad={() => setIsLoaded(true)} // 이미지 로드를 완료하면 isLoaded 상태 변경
          alt={details.author}
        />
      )}
    </div>
  );
}

 

이미지 태그의 opacity(투명도)는 기본값 0에서 ➊화면에 노출된 후 ➋이미지 로드를 완료하면 1로 변경하도록 설정한다. 여기에 transition: opacity 1s ease-in-out CSS 속성을 주면 이미지가 서서히 보이는 효과를 줄 수 있다. 첫 화면에선 지연 로딩이 필요 없으므로 noLazy 프롭이 false일 때만 transition 효과 지속 시간이 1초가 되도록(duration-1000) 작성한다.

const imgClasses = classnames(
  `transition-opacity ease-in-out ${!noLazy && 'duration-1000'}`,
  // 이미지 서서히 보이는 효과 ('opacity-0': !isLoaded 만 입력해도 작동함)
  { 'opacity-100': isLoaded, 'opacity-0': !isLoaded },
);

 

LazyLoading 컴포넌트

API 호출 역시 커스텀 훅(useFetchData.js)으로 만들어서 사용한다. 렌더링 리스트엔 위에서 만든 IO 커스텀 훅을 이용해서 무한 스크롤을 적용한다. 화면 가장 아래로 스크롤하면 page 상태가 변경되고, page 상태가 변경된걸 감지한 useFetchData 커스텀 훅이 해당 page에 대한 데이터를 다시 받아온다.

// LazyLoading.js
export default function LazyLoading() {
  const [page, setPage] = useState(1);
  const { data, loading } = useFetchData({
    url: 'https://picsum.photos/v2/list', // 이미지 리스트 API 주소
    params: { page, limit: 20 }, // page 상태 변경 시 해당 page에 대한 데이터를 다시 받아온다
  });

  const loaderRef = useIntersectionObserver({
    // 무한 스크롤 Intersection Observer
    callback: () => setPage((prev) => prev + 1), // 화면 가장 아래로 스크롤 시 page 상태 변경
  });

  return (
    <section className="flex flex-col justify-center items-center p-8 gap-8">
      {data?.map(({ id, ...details }, i) => (
        <LazyImage
          key={id}
          details={details} // 이미지 세부정보
          src={`https://picsum.photos/id/${id}/1280/768`}
          noLazy={i < 5} // 첫 화면에선 지연로딩이 필요 없으므로 처음 5개 이미지는 바로 보여준다
        />
      ))}
      <div className={`${loading ? 'visibility' : 'invisible'}`}>
        🔍️ Fetching items...
      </div>

      {/* 화면 가장 아래까지 스크롤 했는지 확인하기 위한 빈요소 */}
      <div ref={loaderRef} className={`w-full ${data ? 'block' : 'hidden'}`} />
    </section>
  );
}

page, query 쿼리스트링(key=value)은 검색창이나 무한 스크롤 등을 구현할 때 value가 변경될 때마다 데이터를 다시 받아야 된다. 따라서 useEffect 종속성 배열에 추가해서 값이 변경될 때마다 다시 호출 되도록 한다. key는 API마다 다르므로(q=value, query=value 등) 상황에 맞게 변경해서 사용한다. 

import { useEffect, useState } from 'react';
import axios from 'axios';

const useFetchData = ({
  method = 'get',
  url,
  payload,
  params: { page, query, ...restParams },
}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true); // API 호출 시작 - 로딩 상태 변경
    axios({
      method, // 기본값 get
      url,
      data: payload, // payload 값이 null 혹은 undefined 이면 요청 바디에 추가되지 않는다
      params: { page, q: query, ...restParams },
    })
      .then((res) => {
        setData((prev) => (prev ? [...prev, ...res.data] : res.data));
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false); // API 호출 종료 - 로딩 상태 변경
      });
  }, [page, query]); // page 및 query 값이 변경될 때마다 API 호출

  return { loading, data, error };
};

export default useFetchData;

 

(2) Dominant color placeholder

💡 Dominant color placeholder는 따로 구현하지 않고 설명만 작성했다.

 

이미지 출처 manu.ninja

Pinterest, Google Image 등의 사이트는 이미지가 로드되기 전 해당 이미지의 메인 컬러를 먼저 보여준다. 이미지의 처음 1x1 픽셀로 스케일을 감소시킨 후 해당 픽셀로 placeholder를 채우는 방식으로 구현했다고 한다. 클라이언트에선 이미지 리소스를 가지고 있지 않으므로 서버에서 Dominant Color를 추출한 후 클라이언트로 보내주는 작업이 필요할 것 같다.

 

Imagekit은 각종 최적화 기능이 포함된 이미지 CDN이다. 이미지 URL에 쿼리스트링만 추가하면 Dominant 색상이 채워진 placeholder 이미지를 가져올 수 있다. Imagekit에 이미지를 업로드한 후 URL 끝에 ?tr=w-1,h-1:w-너비,h-높이 쿼리 스트링만 추가하면 된다. 무료 버전은 20GB 대역폭까지 사용할 수 있으므로 토이 프로젝트 규모에 사용하기 적당해보인다.

 

원본 이미지 (130kb)

Dominant Color 이미지 (2kb)

블러 30 / 퀄리티 50 이미지 (5kb)

# 출처 ImageKit 공식 문서

        URL-endpoint        transformation       image path                                    
┌──────────────────────────┐┌────────────┐┌───────────────────────┐
https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg

# Imagekit에 업로드한 1280x768 크기의 원본 이미지 URL (130kb)
https://ik.imagekit.io/colorfilter/lazy-loading/image-01.jpg

# Dominant 컬러로 채워진 1280x768 크기의 이미지 URL (2kb)
https://ik.imagekit.io/colorfilter/lazy-loading/image-01.jpg?tr=w-1,h-1:w-1280,h-768

 

Imagekit에서 제공하는 이미지 transformation 기능으로 저화질의 블러 처리된 이미지를 가져올 수도 있다. 블러 효과는 1~100, 퀄리티 조절은 1~100(기본값 80) 사이의 값을 입력하면 된다. 원본 이미지 용량이 130kb 정도였는데 퀄리티를 낮추고 블러 효과를 적용하니 5kb 정도로 줄었다. placeholder로 사용하기 적절하다.

# 블러 30, 퀄리티 50이 적용된 1280x768 크기의 이미지 URL (5kb)
https://ik.imagekit.io/colorfilter/lazy-loading/image-01.jpg?tr=w-1280,h-768,bl-30,q-50

 

다양한 이미지 transformation 기능 외에도 React 같은 프레임워크에서 사용할 수 있는 패키지도 제공한다. 기존 사용하던 저장소(Amazon S3, Google Storage 등)가 있다면 Imagekit과 통합해서 사용할 수도 있다.

 

(3) Blur image placeholder ⭐️

블러 placeholder를 사용한 Lazy Loading(GIF 화질 때문에 블러 이미지가 뭉개져서 보이는 점 참고)

💡 렌더링 과정 : ➊화면에 노출되기 전까진 회색 배경의 빈 요소 표시 → ➋화면에 노출되면 placeholder 이미지 표시하고 원본 이미지 로드 시작 → ➌원본 이미지 로드를 마치면 화면에 표시

 

Lorem Picsum API에 Imagekit 같은 다양한 transformation 기능은 없지만 Blur 효과를 적용할 수 있다. 이미지 사이즈도 조절할 수 있으므로 작은 사이즈의 블러 효과가 적용된 이미지를 Placeholder로 사용하면 된다. 참고로 CSS의 filter 속성으로도 블러 효과를 줄 수 있다. ex) filter: blur(10x)

 

블러 효과는 1~10 사이의 강도로 조절할 수 있다. 50x30 정도의 작은 사이즈 이미지의 크기를 늘리면 깨짐 현상이 나타나지만 블러 효과를 적용했기 때문에 깨진 부분이 블러 효과에 의해 가려진다. 용량도 1kb 안팎이다.

 

✏️ Placeholder 이미지를 받아오기 위해 네트워크 요청을 1번 더 해야되는 단점이 있다. 

# 1280x768 이미지 (1024는 이미지 ID)
https://picsum.photos/id/1025/1280/768

# blur 3이 적용된 50x30 이미지
https://picsum.photos/id/1025/50/30?blur=3

 

1280x768 이미지 (146kb)

블러 효과가 적용된 50x30 이미지 (1.1kb)

 

LazyLoading 컴포넌트 수정

LazyImage 컴포넌트로 넘기는 props에 Placeholder로 사용할 이미지 주소인 thumb를 추가한다.

export default function LazyLoading() {
  // ...생략

  return (
    <section className="flex flex-col justify-center items-center p-8 gap-8">
      {data?.map(({ id, ...details }, i) => (
        <LazyImage
          key={id}
          details={details} // 이미지 세부정보
          src={`https://picsum.photos/id/${id}/1280/768`} // original 이미지
          thumb={`https://picsum.photos/id/${id}/50/30?blur=3`} // placeholder 이미지
          noLazy={i < 5} // 첫 화면에선 지연로딩이 필요 없으므로 처음 5개 이미지는 바로 보여준다
        />
      ))}
        {/* 생략 */}
    </section>
  );
}

export default function LazyLoading() {
  const [page, setPage] = useState(1);
  const { data, loading } = useFetchData({
    url: 'https://picsum.photos/v2/list', // 이미지 리스트 API 주소
    params: {
      page, // page 상태 변경 시 해당 page 에 대한 데이터를 다시 받아온다
      limit: 20, // 1개 페이지에 최대 20개 아이템으로 제한
    },
  });

  // 무한 스크롤 Intersection Observer
  const loaderRef = useIntersectionObserver({
    callback: () => {
      setPage((prev) => prev + 1); // 화면 가장 아래로 스크롤 시 page 상태 변경
    },
  });

  return (
    <section className="flex flex-col justify-center items-center p-8 gap-8">
      {data?.map(({ id, ...details }, i) => (
        <LazyImage
          key={id}
          details={details} // 이미지 세부정보
          src={`https://picsum.photos/id/${id}/1280/768`} // original 이미지
          thumb={`https://picsum.photos/id/${id}/50/30?blur=3`} // placeholder 이미지
          noLazy={i < 5} // 첫 화면에선 지연로딩이 필요 없으므로 처음 5개 이미지는 바로 보여준다
        />
      ))}
      <div className={`${loading ? 'visibility' : 'invisible'}`}>
        🔍️ Fetching items...
      </div>
      {/* 화면 가장 아래까지 스크롤 했는지 확인하기 위한 빈요소 */}
      <div ref={loaderRef} className={`w-full ${data ? 'block' : 'hidden'}`} />
    </section>
  );
}

 

LazyImage 컴포넌트 수정

➊thumb props를 추가로 받으므로 컴포넌트 파라미터에 추가하고, ➋Placeholder 이미지를 위한 <img> 태그도 추가한다. Placeholder / 원본 이미지 2개를 모두 한 위치에서 표시하므로 이미지를 감싸는 ➌div 컨테이너의 position 속성은 relative, ➍자식 태그인 <img>는 absolute로 변경한다. ➎Placeholder 이미지 크기는 50x30 정도로 작으므로 부모 요소(div)의 너비/높이 만큼 크기를 키운다.

function LazyImage({ src, noLazy, thumb, details }) { // ⑴
  // ...

  return (
    <div
      ref={imageRef} // IO 커스텀 훅이 반환한 ref 객체 할당
      className="relative bg-gray-200 w-4/6 aspect-[5/3] rounded-md overflow-hidden" // ⑶
    >
      {isInView && (
        <>
          <img // placeholder 이미지 ⑵
            className="absolute w-full h-full object-covers" // ⑷ ⑸
            src={thumb}
            alt={details.author}
          />
          <img // original 이미지
            className={imgClasses}
            src={src}
            onLoad={() => setIsLoaded(true)} // 이미지 로드를 완료하면 isLoaded 상태 변경
            alt={details.author}
          />
        </>
      )}
    </div>
  );
}

 

Placeholder (블러)이미지 → 원본 이미지 전환을 자연스럽게 하기 위해 transition-delay(전환 효과를 시작하기 전의 대기시간) CSS 속성도 200으로 설정했다. 그럼 원본 이미지가 투명(opacity: 0)에서 불투명(opacity: 1)으로 변하기 전 200ms 대기 시간을 갖게된다. 즉, 블러 이미지가 200ms 동안 더 보이는 것.

const imgClasses = classnames(
  `absolute transition-opacity ease-in-out ${!noLazy && 'delay-200 duration-1000'}`,
  // 이미지 서서히 보이는 효과 ('opacity-0': !isLoaded 만 입력해도 작동함)
  { 'opacity-100': isLoaded, 'opacity-0': !isLoaded },
);

function LazyImage({ src, noLazy, thumb, details }) {
  const [isInView, setIsInView] = useState(!!noLazy);
  const [isLoaded, setIsLoaded] = useState(false);

  const imageRef = useIntersectionObserver({
    callback: () => {
      setIsInView(true); // 관찰 대상이 화면에 노출되면 isInView 상태 변경
    },
    unObserve: true, // 관찰 대상이 화면에 노출(교차)되면 이미지를 로드한 상태이므로 관찰 해제
    options: { rootMargin: '40%' }, // 스크롤이 하단에 도달했을즈음 다음 이미지를 미리 불러오기 위해 rootMargin 설정
  });

  const imgClasses = classnames(
    `absolute transition-opacity ease-in-out 
    ${!noLazy && 'delay-200 duration-1000'}`,
    {
      'opacity-100': isLoaded,
      'opacity-0': !isLoaded,
    },
  );

  return (
    <div
      ref={imageRef} // IO 커스텀 훅이 반환한 ref 객체 할당
      className="relative bg-gray-200 w-4/6 aspect-[5/3] rounded-md overflow-hidden"
      // 이미지를 감싸는 컨테이너 요소에 너비/높이를 지정해서 이미지 로딩시 밀림 현상을 방지한다
    >
      {isInView && (
        <>
          <img // placeholder image
            className="absolute w-full h-full object-covers"
            src={thumb}
            alt={details.author}
          />
          <img // 원본 이미지
            className={imgClasses}
            src={src}
            onLoad={() => setIsLoaded(true)} // 이미지 로드를 완료하면 isLoaded 상태 변경
            alt={details.author}
          />
        </>
      )}
    </div>
  );
}

 

레퍼런스

---

• Lazy Loading Images - The Complete Guide
• 웹 성능 최적화를 위한 Image Lazy Loading 기법
• Lazy Loading Images in React
• Intersection Observer API의 사용법과 활용방법  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요