Lazy Loading

heyhey·2022년 12월 22일

frontend

목록 보기

2/14

레이지 로딩은 이름부터 알기 쉽습니다.
이미지 로딩을 웹을 띄우고 나서 천천히 하는 것과 사용자의 데이터 낭비를 막아주는 것.
레이지 로딩에 대해서 알아보겠습니다.

Lazy Loading 이란?

레이지 로딩은 이미지에 대한 로딩을 뒤로 미루는 것을 의미합니다.

필요한 부분만 불러오고 나머지 부분은 사용자가 필요할 때까지 미루는 것으로 사용자의 데이터 낭비를 막아줍니다.

기존의 페이지는 웹 페이지를 열면 브라우저가 모든 이미지를 읽고 불러와서 DOM에 렌더링할 것입니다.

이미지가 많다면 여는 시간도 오래 걸릴 것이고 데이터도 많이 들 것입니다.

예를 들어 사용자가 검색 엔진에서 한 이미지를 검색하면, 요청한 내용으로 채워진 전체 웹 페이지가 로드됩니다.

이미지가 많기 때문에 전체를 렌더링 하기 위해서는 데이터 양이 많을 것입니다. 하지만 우리가 필요한 이미지는 사실 맨 위의 다섯장 정도 안에 있기 마련입니다. 이런식으로 필요없는 이미지를 불러오게 되면 리소스가 낭비됩니다.

lazy Loading을 사용하면 placeholder 콘텐츠로 작성되며 사용자가 필요할 때만 실제 콘텐츠로 대체됩니다.

무한 스크롤에서, 아래로 스크롤해서 내리는 애니메이션을 통해 웹 페이지의 내용이 로드되는게 하나의 예입니다.

Lazy Loading 장점

시간 소비와 메모리 사용량을 줄여 콘텐츠 전달을 최적화할 수 있습니다.

필요한 웹페이지의 일부가 먼저 로드되기 때문에 시간이 적게 소요되고, 나머지의 로딩이 미뤄져 저장공간이 절약됩니다.

불필요한 코드 실행을 피하고 시간과 공간 자원의 최적화된 사용을 가능하게 합니다.

Lazy Loading 단점

코드가 복잡해질 수 있고, 로드되지 않은 컨텐츠의 부적절한 인덱싱으로 검색 엔진에서 순위에 영향을 미칠수 있습니다.

Lazy Loading 예시

사진이나 영상에 사용하거나 사용자에게 바로 보여지는 페이지에서 이미지를 나중에 불러오는 방법이 있습니다.

Lazy loading 구현

방법1

이미지 로드를 사전에 막고 브라우저에게 해당 이미지를 언제 로드할건지에 대한 것을 알려주어야 합니다.

이번 방법은 IntersectionObserver API 를 사용해서 쉽게 구현해 보겠습니다.

(실제로 스크롤 이벤트리스터보다 성능도 좋다고 합니다. )

Lazy Load 시킨 이미지들을 로딩시키기 위해 해당 이미지들에 옵저버를 적용합니다.

엘리먼트가 뷰포트에 들어간 것을 확인하기 위해 isIntersecting, intersectionRatio 속성을 사용합니다.

또한 확인이 되면 url을 data-src속성에서 src 속성으로 브라우저가 이미지를 로드하도록 트리거를 일으킵니다.

그 후 해당 이미지는 lazy 클래스를 제거하고 옵저버를 해제합니다.

const useLazyLoading = () => {
  const imgs = document.querySelectorAll('.lazy');

  const observerCallback = (entries, observer) => {
    entries.forEach(({ isIntersecting, intersectionRatio, target }) => {
      if (isIntersecting && intersectionRatio > 0) {
        target.src = target.dataset.src;
        target.classList.remove("lazy");
        observer.unobserve(target);
      }
    });
  };

  const Intersection = new IntersectionObserver(observerCallback);
  imgs.forEach((img) => Intersection.observe(img));
};

useLazyLoading();