이미지 로딩을 효율적으로 처리하기 위한 자바스크립트 Lazy Loading 방법

10 Nov 2023

javascript

이미지 로딩은 웹 페이지의 성능에 큰 영향을 미칩니다. 특히, 많은 양의 이미지를 동시에 로딩하면 사용자 경험에 악영향을 줄 수 있습니다. 이러한 문제를 해결하기 위해 lazy loading이라는 기술이 등장했습니다. Lazy loading은 페이지 로드 시 이미지를 모두 로딩하는 것이 아니라, 사용자가 스크롤할 때 필요한 이미지만 로딩하는 방식입니다. 이로써 페이지의 로딩 속도를 향상시키고, 데이터 사용량을 줄일 수 있습니다.

자바스크립트로 lazy loading을 구현하는 방법은 여러 가지가 있습니다. 이번 포스트에서는 가장 간단하고 널리 사용되는 Intersection Observer API를 활용한 방법을 소개하겠습니다.

Intersection Observer API란?

Intersection Observer API는 브라우저가 요소가 화면에 보이는지 여부를 자동으로 감지할 수 있게 해주는 API입니다. 이 API를 이용하여 스크롤 이벤트를 직접 처리하지 않고도 요소의 가시성을 모니터링할 수 있습니다.

Lazy Loading 구현하기

1. Intersection Observer 객체 생성하기

const lazyImages = document.querySelectorAll('.lazy');

const options = {
  root: null, // 뷰포트를 root로 사용
  rootMargin: '0px', // root 요소와의 여유 영역
  threshold: 0.1 // target이 root를 벗어나는 정도
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
}, options);

2. 관찰 대상 설정하기

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

3. HTML 마크업 작성하기

<img class="lazy" data-src="경로/이미지.jpg" alt="이미지">

위의 코드에서 “lazy” 클래스를 가진 이미지 요소에는 실제 이미지의 경로를 “data-src” 속성에 저장하고 있습니다. 스크롤에 따라 이미지가 화면에 보이게 되면 Intersection Observer가 작동하여 “lazy” 클래스를 제거하고 이미지의 실제 경로를 “src” 속성에 대입합니다.

결론

이번 포스트에서는 이미지 로딩을 효율적으로 처리하는 자바스크립트 lazy loading 방법을 소개했습니다. Intersection Observer API를 이용하여 스크롤 이벤트를 처리하지 않고도 이미지의 가시성을 감지하고 필요할 때만 로딩함으로써 웹 페이지의 성능을 향상시킬 수 있습니다. lazy loading은 대용량 이미지를 다루는 웹 사이트에서 매우 유용하며, 사용자 경험을 향상시킬 수 있는 중요한 기술입니다.

참고 자료:

Intersection Observer API MDN 문서
Lazy Loading Images and Video #WebDevelopment #LazyLoading