[javascript] 자바스크립트로 스크롤 이벤트 기반의 지연 로딩을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

첫째, scroll 이벤트를 감지하여 스크롤 위치를 파악합니다. 둘째, 스크롤 위치에 따라 필요한 데이터를 동적으로 로드합니다. 셋째, 로딩을 지연시키기 위해 debounce 또는 throttle 함수를 사용하여 스크롤 이벤트의 반응을 제어합니다.

아래는 간단한 예제 코드입니다.

// 필요한 데이터를 가져오는 함수
function fetchData() {
  // 데이터를 가져오는 로직 작성
}

// 스크롤 이벤트 핸들러
function handleScroll() {
  // 스크롤 위치 파악
  const scrollPosition = window.scrollY;

  // 필요한 스크롤 위치에 도달하면 데이터 로드
  if (scrollPosition >= document.body.offsetHeight - window.innerHeight) {
    fetchData();
  }
}

// 스크롤 이벤트에 debounce 적용
const debounceScroll = debounce(handleScroll, 100);
window.addEventListener('scroll', debounceScroll);

위 코드에서 fetchData 함수는 필요한 데이터를 가져오는 로직을 담당합니다. handleScroll 함수는 스크롤 위치를 파악하고, 필요한 위치에 도달하면 데이터를 로드하는 역할을 합니다. debounce 함수는 스크롤 이벤트를 지연시켜줍니다.

이렇게 함으로써 스크롤 이벤트를 기반으로 한 지연 로딩을 구현할 수 있습니다.