Lazy Loading을 이용한 동적 컨텐츠 로딩 방법

10 Nov 2023

javascript

이제 많은 웹 페이지에서 동적 컨텐츠를 로딩하는 것이 일반적입니다. 하지만 모든 동적 컨텐츠를 한 번에 로딩하면 초기 로딩 시간이 길어지고 사용자 경험에도 독이 들어갈 수 있습니다. 이러한 문제를 해결하기 위해 “Lazy Loading” 기법을 사용할 수 있습니다.

Lazy Loading이란?

Lazy Loading은 웹 페이지에서 필요한 컨텐츠를 사용자가 실제로 스크롤하거나 다른 상호작용을 할 때까지 로딩하지 않는 기법입니다. 사용자가 해당 컨텐츠에 도달할 때까지 로딩을 지연시킴으로써 초기 로딩 시간을 단축시킬 수 있습니다.

Lazy Loading을 구현하는 방법

이미지 Lazy Loading

자주 사용되는 Lazy Loading 기법 중 하나는 이미지 Lazy Loading입니다. 대부분의 웹 페이지에서 이미지는 로딩 시간을 크게 영향을 미치므로 이를 최적화하는 것이 중요합니다.

<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load-img">

위의 코드에서 data-src 속성에 실제 이미지의 경로를 설정하고, class에는 lazy-load-img와 같은 클래스를 추가합니다.

이후 JavaScript 코드에서는 사용자가 스크롤하거나 상호작용할 때, lazy-load-img 클래스를 가진 이미지 요소의 data-src 속성 값을 src 속성으로 변경하도록 구현합니다.

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll(".lazy-load-img"));
  
  if ("IntersectionObserver" in window) {
    var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy-load-img");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
  
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

다른 동적 컨텐츠 Lazy Loading

이미지뿐만 아니라 다른 동적 컨텐츠도 Lazy Loading을 적용할 수 있습니다. 예를 들어, 스크롤을 내릴 때 동적으로 로딩되는 댓글 섹션을 Lazy Loading으로 구현해보겠습니다.

<div id="commentsContainer" class="lazy-load-container">
  <!-- 댓글 섹션 -->
</div>

위의 코드에서 lazy-load-container 클래스를 추가한 댓글 섹션을 사용자가 스크롤하거나 상호작용할 때 로딩하도록 구현합니다.

document.addEventListener("DOMContentLoaded", function() {
  var lazyContainers = [].slice.call(document.querySelectorAll(".lazy-load-container"));
  
  if ("IntersectionObserver" in window) {
    var lazyContainerObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var lazyContainer = entry.target;
          // 동적 로딩 로직을 구현합니다.
          // 댓글을 가져오는 API 호출 등
          lazyContainer.classList.remove("lazy-load-container");
          lazyContainerObserver.unobserve(lazyContainer);
        }
      });
    });
  
    lazyContainers.forEach(function(lazyContainer) {
      lazyContainerObserver.observe(lazyContainer);
    });
  }
});

마치며

Lazy Loading은 웹 페이지의 초기 로딩 시간을 단축시켜 사용자 경험을 향상시키는 좋은 기법입니다. 이미지나 다른 동적 컨텐츠를 로딩할 때 Lazy Loading을 적용해보세요. 사용자의 스크롤 또는 상호작용에 따라 필요한 컨텐츠가 동적으로 로딩되는 것을 확인할 수 있을 것입니다.

#LazyLoading #WebOptimization