무한 스크롤은 웹 페이지에서 추가 콘텐츠를 동적으로 로드하여 사용자에게 끊김 없는 경험을 제공하는 기법입니다. 사용자가 스크롤을 끝까지 내리면 자동으로 새로운 콘텐츠가 로딩되는 방식으로 동작합니다.

이번에는 자바스크립트의 Lazy Loading 기능을 활용하여 무한 스크롤을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 라이브러리 설치

먼저, Lazy Loading을 구현하기 위해 필요한 라이브러리를 설치해야 합니다. 이 예시에서는 “lozad.js”를 사용합니다. 다음 명령어를 사용하여 lozad.js를 설치합니다.

npm install lozad

2. Lazy Loading 설정

Lazy Loading을 사용하려면, 이미지나 동영상 등의 콘텐츠를 Lazy Load할 수 있도록 설정해야 합니다. 이를 위해 다음과 같이 HTML 요소에 data-src 속성을 추가합니다.

<img class="lozad" data-src="path/to/image.jpg" alt="Image">

3. 스크롤 이벤트 처리

무한 스크롤을 위해 스크롤 이벤트를 감지하고 새로운 콘텐츠를 로딩하는 로직을 작성해야 합니다.

const observer = lozad('.lozad', {
  loaded: function(el) {
    el.classList.add('fade'); // 이미지가 로딩되면 fade 효과를 적용합니다.
  }
});

observer.observe(); // 스크롤 이벤트를 감지할 대상을 등록합니다.

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    // 스크롤이 끝에 도달하면 새로운 콘텐츠를 로딩합니다.
    fetchNewContent();
  }
});

위의 코드에서 lozad('.lozad')는 .lozad 클래스를 가진 요소를 Lazy Load 대상으로 등록하는 부분입니다. 이미지가 로딩되면 fade 클래스가 추가되어 효과를 적용합니다.

window.addEventListener('scroll')에서는 스크롤 이벤트를 감지하여 스크롤이 끝에 도달하면 fetchNewContent() 함수를 호출하여 새로운 콘텐츠를 로딩하는 로직을 구현합니다. 이 함수는 실제로 서버에서 콘텐츠를 가져오는 로직을 포함하게 됩니다.

마치며

위 방법을 사용하면 자바스크립트의 Lazy Loading 기능을 활용하여 무한 스크롤을 구현할 수 있습니다. 이를 통해 웹 페이지에서 사용자에게 끊김 없는 경험을 제공할 수 있습니다.

더 많은 자세한 내용은 lozad.js 공식 문서를 참조하시기 바랍니다.

#lazyloading #infinitescroll