Lazy Loading을 이용한 동적 데이터 로딩 방법

10 Nov 2023

javascript

일반적으로 웹 페이지에서 동적으로 데이터를 로딩할 때는 사용자가 페이지를 스크롤하거나 버튼을 클릭하는 등의 상호작용을 해야하는 경우가 많습니다. 그러나 사용자 경험을 향상시키기 위해 Lazy Loading이라는 기술을 사용하여 필요한 데이터를 효율적으로 로딩할 수 있습니다.

Lazy Loading의 개념

Lazy Loading은 필요한 데이터를 필요한 시점에 로딩하는 것을 의미합니다. 즉, 사용자가 페이지를 스크롤하거나 다른 동작을 통해 데이터가 필요한 경우에만 해당 데이터를 로딩합니다. 이를 통해 초기 페이지 로딩 시간을 줄이고, 필요하지 않은 데이터를 로딩하지 않아 자원을 효율적으로 사용할 수 있습니다.

Lazy Loading의 구현 방법

1. Intersection Observer API 사용

Lazy Loading을 구현하기 위해 가장 흔히 사용되는 방법은 Intersection Observer API를 사용하는 것입니다. Intersection Observer API는 요소가 화면에 보이는지 여부를 관찰하고, 보이는지 여부에 따라 콜백 함수를 호출하는 기능을 제공합니다. Lazy Loading을 구현할 때는 데이터가 필요한 시점에 해당 요소가 보이는지 여부를 감지하여 데이터를 로딩하면 됩니다.

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

        img.setAttribute('src', src);
        observer.unobserve(img);
      }
    });
  });

  io.observe(target);
};

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

images.forEach((img) => {
  lazyLoad(img);
});

위의 코드는 Intersection Observer API를 사용하여 이미지를 Lazy Loading하는 예시입니다. 이미지 요소에 data-src 속성을 추가하여 실제 로딩할 이미지의 경로를 지정하고, lazyLoad 함수를 호출하여 Intersection Observer를 등록합니다. 해당 이미지가 화면에 보이게 되면 data-src 속성의 값으로 실제 이미지를 로딩하게 됩니다.

2. Scroll 이벤트를 이용한 Lazy Loading

Intersection Observer API가 지원되지 않는 구형 브라우저에서는 Scroll 이벤트를 이용하여 Lazy Loading을 구현할 수 있습니다. Scroll 이벤트를 사용하여 현재 스크롤 위치를 감지하고, 필요한 데이터를 로딩하는 함수를 호출하면 됩니다.

const lazyLoad = () => {
  const images = document.querySelectorAll('img[data-src]');

  images.forEach((img) => {
    if (img.getBoundingClientRect().top <= window.innerHeight) {
      const src = img.getAttribute('data-src');

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

window.addEventListener('scroll', lazyLoad);

위의 코드는 Scroll 이벤트를 사용하여 이미지를 Lazy Loading하는 예시입니다. 스크롤 이벤트가 발생하면 현재 스크롤 위치를 감지하여 화면에 보이는 이미지를 로딩합니다.

마무리

Lazy Loading을 이용하면 웹 페이지의 성능과 사용자 경험을 향상시킬 수 있습니다. Intersection Observer API를 사용하면 가장 효율적이고 쉽게 Lazy Loading을 구현할 수 있지만, 구형 브라우저를 지원해야 한다면 Scroll 이벤트를 사용할 수도 있습니다. 적절한 방법을 선택하여 Lazy Loading을 적용하여 웹 페이지의 성능을 개선해보세요.

#WebDevelopment #Frontend