[javascript] 자바스크립트로 이미지 지연 로딩을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

1. Intersection Observer를 사용하기

const images = document.querySelectorAll('.lazy-load');

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.getAttribute('data-src');
      image.setAttribute('src', src);
      observer.unobserve(image);
    }
  });
}, options);

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

<img class="lazy-load" data-src="path_to_image.jpg" src="placeholder.jpg" alt="Description">

위의 코드는 Intersection Observer API를 사용하여 지연 로딩을 구현한 예시입니다. lazy-load 클래스를 갖는 이미지 요소들의 실제 소스(src)는 data-src 속성으로 지정되어 있고, 화면에 나타날 때까지 로드되지 않습니다.

2. scroll 이벤트 리스너 사용하기

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('.lazy-load');

  function lazyLoad() {
    lazyImages.forEach(image => {
      if (image.offsetTop < window.innerHeight + window.pageYOffset) {
        image.src = image.dataset.src;
        image.classList.remove('lazy-load');
      }
    });
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationchange', lazyLoad);

  lazyLoad();
});

<img class="lazy-load" data-src="path_to_image.jpg" src="placeholder.jpg" alt="Description">

이 코드는 scroll 이벤트와 offset 값을 사용하여 이미지를 지연 로딩하는 방법을 보여줍니다.

이러한 기술들을 사용하면 페이지가 더 빨리 로드되고, 사용자의 대기 시간을 최소화하여 더 나은 경험을 제공할 수 있습니다.

참고 문헌:

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
https://web.dev/use-lighthouse-for-performance-budgets/

Intersection Observer 및 scroll 이벤트 리스너에 대한 내용은 MDN 웹 문서를 참고하면 도움이 될 것입니다.