자바스크립트에서 Lazy Loading 패턴 적용하기

10 Nov 2023

javascript

지금은 웹 페이지의 성능을 향상시키는 데 많은 관심이 기울여지고 있습니다. 웹 페이지의 빠른 로딩은 사용자 경험을 향상시키고, 사용자 이탈률을 감소시키는 데 중요합니다. 이를 위해 ‘Lazy Loading’이라는 패턴을 사용하여 필요한 자원이 실제로 필요할 때만 로딩하는 방법을 적용할 수 있습니다.

Lazy Loading은 웹 페이지에서 특정 자원, 보통 이미지나 동영상 등,을 필요한 순간에 동적으로 로딩하도록 하는 기술입니다. 이를 통해 사용자가 웹 페이지를 스크롤할 때 필요없는 자원을 미리 로딩하는 것을 방지하고, 필요한 자원만을 로딩함으로써 페이지 로딩 속도를 개선할 수 있습니다.

자바스크립트에서 Lazy Loading을 적용하는 가장 간단한 방법은 이미지 로딩을 지연시키는 것입니다. 예를 들어, 이미지가 뷰포트에 들어왔을 때 로딩되도록 설정할 수 있습니다. 이를 위해 Intersection Observer API를 사용할 수 있습니다. Intersection Observer는 뷰포트와 해당 요소의 교차점을 감지하여 콜백 함수를 호출합니다.

아래는 Lazy Loading 패턴을 적용하는 예시 코드입니다.

// 이미지 요소의 클래스에 'lazy' 클래스를 추가합니다.
<img class="lazy" data-src="image.jpg" alt="Lazy loaded image">

// Intersection Observer를 생성합니다.
const lazyImages = document.querySelectorAll('.lazy');
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);
    }
  });
});

// Intersection Observer를 이미지 요소에 등록합니다.
lazyImages.forEach(image => {
  observer.observe(image);
});

위 코드에서는 이미지 요소의 클래스에 ‘lazy’ 클래스를 추가하고, data-src 속성을 통해 실제 이미지 경로를 저장해두는 방식을 적용했습니다. Intersection Observer의 콜백 함수에서는 교차점이 발생했을 때 이미지의 src를 설정하고, ‘lazy’ 클래스를 제거하여 이미지가 로딩되도록 합니다.

이렇게 Lazy Loading 패턴을 자바스크립트에 적용함으로써 웹 페이지의 성능을 개선할 수 있습니다. 페이지에서 필요한 자원만을 로딩하므로 효율적인 자원 관리가 가능해지고, 사용자 경험을 향상시킬 수 있습니다.

참고 자료: