이미지 외에도 비디오, 오디오 등 다양한 미디어를 로딩하는 Lazy Loading

10 Nov 2023

javascript

소개

웹 페이지에서 이미지를 로딩하는 동안 다른 요소들도 함께 로딩되는 경우, 사용자가 웹 페이지를 보는 동안 페이지가 느리게 로딩될 수 있습니다. 이러한 문제를 해결하기 위해 “Lazy Loading”이라는 기술이 개발되었습니다. Lazy Loading은 웹 페이지에서 뷰포트 안에 있는 요소들만 로딩하는 방식으로, 웹 페이지의 성능을 향상시킬 수 있습니다.

Lazy Loading은 기본적으로 이미지에 적용되어 많은 웹 사이트에서 사용되고 있습니다. 그러나 이미지 외에도 비디오, 오디오 등 다른 미디어 요소들에도 Lazy Loading을 적용할 수 있습니다. 이를테면, 웹 페이지에 비디오 플레이어가 있을 때, 사용자가 해당 비디오를 보기 전까지는 비디오 파일을 로딩하지 않고, 사용자가 뷰포트에 도달했을 때 비디오를 로딩하는 방식입니다.

작동 방식

Lazy Loading은 HTML과 JavaScript를 사용하여 구현될 수 있습니다.

HTML 방식

HTML 방식의 Lazy Loading은 data-src 속성을 사용해 원래 이미지/미디어의 경로를 지연시키는 방식입니다. 대신 src 속성에는 로딩 중에 표시할 플레이스홀더 이미지를 넣습니다. 사용자가 해당 이미지/미디어를 뷰포트에 도달하면 JavaScript를 사용하여 data-src 속성의 값을 src 속성에 할당하여 로딩합니다.

<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load" alt="Lazy Loaded Image">

JavaScript 방식

JavaScript 방식의 Lazy Loading은 Intersection Observer API를 사용하여 구현될 수 있습니다. 해당 API는 요소가 뷰포트에 들어올 때 이벤트를 발생시킵니다. 이를 이용하여 이미지/미디어 요소의 로딩을 제어할 수 있습니다.

<img src="placeholder.jpg" data-src="image.jpg" class="lazy-load" alt="Lazy Loaded Image">
<script>
  const lazyImages = document.querySelectorAll('.lazy-load');
  const lazyLoad = (entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  };
  const observer = new IntersectionObserver(lazyLoad);
  lazyImages.forEach((image) => {
    observer.observe(image);
  });
</script>

위의 예시에서는 .lazy-load 클래스를 가진 요소들을 Lazy Loading 대상으로 지정합니다. 이 클래스는 비디오나 오디오 요소에도 적용될 수 있습니다.

이점

Lazy Loading을 사용하면 웹 페이지의 성능을 향상시킬 수 있습니다.

페이지 로딩 속도 개선: 뷰포트 내에 있는 요소만 로딩하므로 페이지 로딩 속도가 개선됩니다.
네트워크 트래픽 감소: 뷰포트에 보이지 않는 요소를 로딩하지 않기 때문에 네트워크 트래픽을 감소시킬 수 있습니다.
사용자 경험 향상: 사용자가 웹 페이지를 더 빠르게 볼 수 있으며, 불필요한 로딩 시간을 줄여줍니다.

마무리

Lazy Loading은 이미지 외에도 비디오, 오디오 등 다양한 미디어 요소에도 적용할 수 있는 유용한 기술입니다. 웹 페이지의 성능을 향상시키고, 사용자 경험을 향상시키기 위해 Lazy Loading을 구현해 보세요.

참고 자료

#webdevelopment #lazyloading