[javascript] 자바스크립트 지연 로딩을 사용하여 웹페이지의 이미지 로딩 순서를 어떻게 조절할 수 있나요?

18 Dec 2023

javascript

지연 로딩을 구현하는 방법 중 하나는 Intersection Observer API를 사용하는 것입니다. Intersection Observer API는 뷰포트와 요소 사이의 교차 영역 변화를 비동기적으로 감지하고 처리할 수 있는 기능을 제공합니다.

아래는 Intersection Observer API를 사용하여 이미지 로딩을 지연시키는 간단한 예제 코드입니다.

// 이미지를 나타내는 모든 요소를 가져옴
const lazyImages = document.querySelectorAll('img.lazy');

// IntersectionObserver 객체 생성
const lazyImageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;
      lazyImage.classList.remove('lazy');
      lazyImageObserver.unobserve(lazyImage);
    }
  });
});

// 모든 이미지 요소를 감시
lazyImages.forEach(image => {
  lazyImageObserver.observe(image);
});

이 코드에서 img 요소들은 lazy 클래스를 가지고 있고, data-src 속성을 통해 실제 이미지의 경로를 저장합니다. Intersection Observer는 이러한 이미지들이 뷰포트 안으로 들어오는지를 감시하고, 들어올 경우에 이미지의 src를 실제 경로로 변경하여 지연된 로딩을 해제합니다.

이러한 방식으로, 지연 로딩을 사용하여 웹페이지의 이미지 로딩 순서를 조절하고 효율적으로 관리할 수 있습니다.