지연로딩은 웹 페이지에서 이미지나 비디오 등의 리소스를 필요한 시점에 로드하여 페이지 로딩 속도를 향상시키는 방법입니다. 이를 구현하기 위해 자바스크립트 Lazy Loading 기술을 활용할 수 있습니다. 이번 포스트에서는 지연로딩 효과를 구현하기 위한 자바스크립트 Lazy Loading 방법을 알아보겠습니다.

1. HTML 이미지 태그의 로딩 속성 활용

지연로딩을 구현하기 위해 가장 간단한 방법은 HTML 이미지 태그의 loading 속성을 이용하는 것입니다. HTML5에서 새로 도입된 loading 속성은 이미지를 지연로드하거나 즉시 로드하는 옵션을 제공합니다.

<img src="이미지경로.jpg" loading="lazy">

loading 속성을 lazy로 설정하면 이미지가 뷰포트에 진입했을 때 로드되도록 설정할 수 있습니다. 이렇게 하면 초기 페이지 로딩 시점에 모든 이미지를 한 번에 요청하지 않으므로 초기 로딩 속도를 향상시킬 수 있습니다.

2. Intersection Observer를 활용한 이미지 로딩

Intersection Observer는 뷰포트와 타겟 엘리먼트의 교차를 관찰하여 알림을 받을 수 있는 API입니다. 지연로딩을 구현하기 위해 Intersection Observer를 활용할 수 있습니다.

const images = document.querySelectorAll('img');

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

const lazyLoad = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;
      observer.unobserve(image);
    }
  });
};

const observer = new IntersectionObserver(lazyLoad, options);

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

위 코드는 페이지에 존재하는 모든 이미지 엘리먼트를 관찰하고, 이미지가 뷰포트에 진입하면 src 속성을 업데이트하여 이미지를 로드하는 기능을 구현한 예시입니다. Observer.observe() 메소드를 사용하여 이미지를 관찰대상으로 등록하고, 이미지가 뷰포트에 진입하면 IntersectionObserver의 콜백 함수인 lazyLoad가 호출되어 이미지를 로드합니다.

3. 라이브러리 활용

지연로딩을 구현하는 또 다른 방법은 라이브러리를 활용하는 것입니다. 대표적인 라이브러리로는 LazyLoad나 Lozad.js가 있습니다. 이러한 라이브러리를 사용하면 Intersection Observer를 직접 다룰 필요 없이 간편하게 지연로딩 효과를 구현할 수 있습니다.

마무리

이렇게 자바스크립트 Lazy Loading을 활용하여 지연로딩 효과를 구현할 수 있습니다. HTML 이미지 태그의 loading 속성, Intersection Observer, 또는 라이브러리를 사용하여 지연로딩을 적용하여 웹 페이지의 로딩 속도를 개선할 수 있습니다. 페이지 성능을 높이기 위해 지연로딩 기술을 적용하는 것을 고려해보세요!

해시태그

#지연로딩 #자바스크립트