이미지 로딩을 위한 프로그레시브 로딩 효과 구현하기 위한 Lazy Loading

10 Nov 2023

javascript

이미지 로딩 속도는 웹 페이지의 사용자 경험을 크게 좌우할 수 있습니다. 특히 대용량의 이미지를 사용하는 웹 페이지의 경우, 이미지 로딩으로 인한 지연으로 인해 사용자들이 웹 페이지를 떠나는 경우가 많습니다. 이를 해결하기 위해 Lazy Loading 기법을 활용하여 이미지를 효율적으로 로딩하는 방법에 대해 알아보겠습니다.

프로그레시브 로딩이란?

프로그레시브 로딩은 이미지 로딩을 단계적으로 처리하여, 이미지의 일부분 또는 저해상도 버전을 먼저 보여준 뒤, 나머지 부분이나 고해상도 버전을 로딩하는 방식을 말합니다. 이를 통해 사용자는 이미지가 완전히 로드되기 전에도 이미지의 일부분이나 저해상도 버전을 볼 수 있어, 페이지의 로딩 시간을 대폭 단축시킬 수 있습니다.

Lazy Loading 방법

Lazy Loading을 구현하기 위해서는 이미지가 보여질 영역이 사용자의 뷰포트에 들어왔을 때 이미지를 동적으로 로드해야 합니다. 이를 위해 Intersection Observer API를 활용할 수 있습니다.

1. Intersection Observer API

Intersection Observer API는 브라우저가 요소의 가시성 여부를 감지하고, 요소가 뷰포트에 들어왔을 때 콜백 함수를 실행시키는 기능을 제공합니다. 이를 활용하여 이미지가 사용자의 뷰포트에 진입할 때 이미지를 로드하도록 구현할 수 있습니다.

// Lazy load images
const images = document.querySelectorAll('img[data-src]');

const options = {
  root: null,
  threshold: 0.5, // 이미지가 50% 이상 노출되었을 때 로딩 시작
  rootMargin: '0px'
};

const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const src = img.getAttribute('data-src');

      img.setAttribute('src', src);
      img.removeAttribute('data-src');

      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(handleIntersection, options);

images.forEach(image => {
  observer.observe(image);
});

위의 예시에서 img[data-src] 선택자를 통해 로딩할 이미지를 선택하고, IntersectionObserver 객체를 생성하여 옵션과 콜백 함수를 설정합니다. handleIntersection 콜백 함수에서 이미지가 뷰포트에 진입할 경우 data-src 속성값을 실제 이미지 경로로 변환하고 src 속성에 할당하여 이미지를 로딩합니다.

2. 이미지 태그 설정

Lazy Loading을 구현하려면 이미지 태그에 data-src 속성을 추가하여 실제 이미지 경로를 저장해야 합니다. src 속성은 로딩할 때까지 비어있는 상태로 두어야 합니다.

<img data-src="images/example.jpg" src="" alt="Example Image">

Lazy Loading의 장점

사용자 경험 향상: 이미지가 로딩되기 전에도 저해상도 버전이나 이미지 일부분을 보여줌으로써 사용자들이 페이지의 로딩을 기다리는 시간을 최소화합니다.
로딩 시간 단축: 페이지 로딩 시 모든 이미지를 로딩하지 않고, 사용자가 보는 영역에 있는 이미지만 로딩하여 페이지의 가시적인 컨텐츠 로딩 시간을 단축시킵니다.
데이터 사용량 절감: 페이지 로딩 시 필요하지 않은 이미지를 미리 로딩하지 않아 데이터 사용량을 줄일 수 있습니다.

Lazy Loading을 통해 이미지 로딩 속도를 향상시켜 사용자 경험을 향상시킬 수 있습니다. Intersection Observer API와 위의 예시 코드를 활용하여 웹 페이지에서 프로그레시브 로딩 효과를 구현해 보세요!

#webdevelopment #lazyloading