우리는 대부분의 웹페이지에서 로딩 시간을 경험했을 것입니다. 특히 이미지와 같은 큰 자원들을 로딩하는데 시간이 걸릴 수 있습니다. 이때 게으른 로딩(lazy loading)을 사용하면 웹페이지의 성능을 향상시킬 수 있습니다.

게으른 로딩이란, 사용자가 스크롤하는 동안에만 이미지를 로딩하는 기법입니다. 즉, 페이지가 처음 로드될 때 모든 이미지를 로딩하지 않고, 사용자가 해당 이미지를 볼 확률이 높을 때에만 로딩하는 것입니다. 이를 통해 초기 로딩 시간을 줄이고, 사용자 경험을 향상시킬 수 있습니다.

이제 자바스크립트를 사용하여 게으른 로딩 효과를 구현해 보겠습니다.

1. Intersection Observer를 사용한 게으른 로딩

Intersection Observer는 타겟 요소와 상위 요소 또는 뷰포트(viewport)의 교차 영역에 대한 정보를 감시할 수 있는 API입니다. 이를 이용하여 게으른 로딩 효과를 구현할 수 있습니다.

const lazyImages = document.querySelectorAll('.lazy');

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

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

위의 코드에서는 lazy 클래스를 가진 모든 이미지 요소를 선택하고, IntersectionObserver를 이용하여 해당 이미지들이 스크롤에 나올 때 이미지를 로딩하도록 설정하였습니다. 즉, 해당 이미지가 보이는 시점에 data-src 속성의 값을 src 속성에 할당하여 이미지를 로드합니다.

2. 라이브러리를 사용한 게으른 로딩

게으른 로딩을 구현하는 데에는 Intersection Observer 외에도 다양한 라이브러리를 사용할 수 있습니다. 대표적으로 이미지를 위한 lozad.js와 LazyLoad.js가 있습니다. 이들 라이브러리는 간편한 구성과 다양한 기능을 제공하며, 게으른 로딩을 더욱 쉽게 구현할 수 있는 장점이 있습니다.

아래는 LazyLoad.js를 사용한 예시 코드입니다.

import LazyLoad from 'lazyload';

const lazyLoadInstance = new LazyLoad({
  elements_selector: '.lazy',
});

lazyLoadInstance.update();

위의 코드에서는 lazy 클래스를 가진 모든 요소를 선택하고, LazyLoad 클래스의 인스턴스를 생성한 뒤, update 메소드를 호출하여 게으른 로딩을 적용합니다.

마무리

자바스크립트를 사용하여 게으른 로딩 효과를 구현하는 방법에 대해 알아보았습니다. 게으른 로딩은 웹페이지의 성능을 향상시키고 사용자 경험을 향상시킬 수 있는 유용한 기법입니다. 위에서 소개한 방법을 사용하여 웹페이지의 로딩 속도를 개선해 보세요!

#webdevelopment #lazyloding ```

참조:
Intersection Observer API: https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
lozad.js 라이브러리: https://github.com/apoorv1993/lozad.js
LazyLoad.js 라이브러리: https://appelsiini.net/projects/lazyload/