더 나은 사용자 참여를 위한 Javascript를 가진 무한 스크롤 구현

Q: 왜 무한한 스크롤을 사용합니까?

무한 스크롤은 직접 사용자 참여 및 사이트 성능에 영향을 미치는 몇 가지 이점을 제공합니다: 그러나 무한 스크롤은 모든 상황에 적합하지 않습니다. 사용자가 특정 항목을 신속하게 찾을 필요가있는 사이트 (예를 들어, 디렉토리 목록 또는 검색 결과)는 발기자 또는 "Load More"버튼을 사용하여 고전적인 질에서 혜택을 누릴 수 있습니다. 결정은 사용자 의도 및 콘텐츠 구조를 기반으로해야합니다.

이 웹 사이트는 귀하가 웹 사이트를 탐색하는 동안 귀하의 경험을 향상시키기 위해 쿠키를 사용합니다. 이 쿠키들 중에서 필요에 따라 분류 된 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한이 웹 사이트의 사용 방식을 분석하고 이해하는 데 도움이되는 제 3 자 쿠키를 사용합니다. 이 쿠키는 귀하의 동의하에 만 브라우저에 저장됩니다. 이러한 쿠키를 거부 할 수도 있습니다. 이러한 쿠키 중 일부를 선택 해제하면 검색 환경에 영향을 미칠 수 있습니다.

왜 무한한 스크롤을 사용합니까?

무한 스크롤은 직접 사용자 참여 및 사이트 성능에 영향을 미치는 몇 가지 이점을 제공합니다:

]양의 필요성을 다루고 있습니다:] 페이지 재부하 및 수동 클릭 제거에 의해, 브라우징은 더 매끄럽고 직관적으로됩니다. 사용자는 중단없이 콘텐츠를 탐색 할 수 있습니다.
Encourages content discovery: 새로운 항목 부하로 자동으로, 방문자는 추가 기사, 제품, 또는 게시물을 볼 가능성이 더 있습니다.
사용자 참여 통계: 세션당 페이지, 페이지, 스크롤 깊이에 대한 시간, 검색의 자연 흐름이 유지되기 때문에 종종 증가.
현대적이고 역동적인 사용자 경험: 트위터, Pinterest, Instagram use infinite scroll와 같은 많은 인기 있는 플랫폼은 웹에서 앱처럼 느낌을 만들 수 있습니다.

그러나 무한 스크롤은 모든 상황에 적합하지 않습니다. 사용자가 특정 항목을 신속하게 찾을 필요가있는 사이트 (예를 들어, 디렉토리 목록 또는 검색 결과)는 발기자 또는 "Load More"버튼을 사용하여 고전적인 질에서 혜택을 누릴 수 있습니다. 결정은 사용자 의도 및 콘텐츠 구조를 기반으로해야합니다.

Infinite Scroll의 기본 구현

기본 무한 스크롤을 구현하는 것은 ] 이벤트를 듣고 사용자가 페이지 하단에 접근 할 때 새로운 콘텐츠를 승인합니다. 아래는 간단한 버전을 구축하는 단계별 가이드입니다.

HTML 구조

초기 콘텐츠를 보유하고 있는 컨테이너 요소 설정. 모든 새로운 항목은 여기에 추가됩니다.

<div id="content">
 <!-- Existing items loaded on page load -->
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
<div id="loading-indicator" style="display:none;">Loading more content...</div>

JavaScript 예제

스크롤 이벤트를 사용하여 사용자가 페이지의 하단에 스크롤했을 때 감지합니다. 임계 값 (])은 그 후반을 뚫는 데 트리거를 방지합니다.

const contentDiv = document.getElementById('content');
const loadingIndicator = document.getElementById('loading-indicator');
let isLoading = false; // Prevent duplicate requests

window.addEventListener('scroll', () => {
 const scrollPosition = window.innerHeight + window.scrollY;
 const documentHeight = document.body.offsetHeight;

 if (scrollPosition >= documentHeight - 200 && !isLoading) {
 loadMoreContent();
 }
});

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 // Simulate fetching new content from server
 const newItem = document.createElement('div');
 newItem.className = 'item';
 newItem.textContent = `New item loaded at ${new Date().toLocaleTimeString()}`;
 contentDiv.appendChild(newItem);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

구현 향상

생산에 대한 무한한 스크롤, 성능 및 사용자 경험은 세련되어야한다.

스크롤 이벤트를 호출

급성한 스크롤 이벤트 화재는 빠르게 성능이 향상됩니다. debounce 기능을 사용하여 체크가 스크롤하여 간단한 일시 중지 후만 실행됩니다.

function debounce(func, wait) {
 let timeout;
 return function executedFunction(...args) {
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(this, args), wait);
 };
}

window.addEventListener('scroll', debounce(checkScrollPosition, 100));

Intersection Observer API 사용

더 효율적이고 현대적인 접근법은 Intersection Observer]입니다. 이 분석은 내용의 하단에 배치된 보정을 모니터링하고 콜백을 볼 때 불을 붙입니다.

const sentinel = document.createElement('div');
sentinel.id = 'scroll-sentinel';
contentDiv.after(sentinel);

const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting && !isLoading) {
 loadMoreContent();
 }
});
observer.observe(sentinel);

이 스크롤 리스너를 부착하고 주요 스레드에 크게 가볍습니다.

취급 End-of-Content Gracefully

더 많은 데이터가 존재하지 않을 때, 무한 스크롤은 로드하려고 중지해야합니다. 속성이 제어 할 수있는 서버에서 간단한 플래그 또는 응답.

let hasMoreContent = true;

async function loadMoreContent() {
 if (!hasMoreContent) return;
 // ... fetch data
 if (response.data.length === 0) hasMoreContent = false;
}

AJAX를 통한 Real Data 구축

무한 스크롤 동적 만들기 위해, 당신은 AJAX를 사용하여 서버에서 데이터를 표를해야합니다. Fetch API는 현대 표준입니다.

Fetch API 예제

이 예제는 서버가 URL 또는 페이지 번호 매개 변수를 사용하여 paginated JSON 데이터를 제공합니다.

const contentUrl = '/api/items?page=1';
let currentPage = 1;

async function loadMoreContent() {
 isLoading = true;
 loadingIndicator.style.display = 'block';

 try {
 const response = await fetch(`/api/items?page=${++currentPage}`);
 if (!response.ok) throw new Error('Network error');
 const data = await response.json();

 data.items.forEach(item => {
 const el = document.createElement('div');
 el.className = 'item';
 el.textContent = item.title;
 contentDiv.appendChild(el);
 });

 // If the server indicates no more data, disable loading
 if (data.is_last_page) hasMoreContent = false;
 } catch (error) {
 console.error('Failed to load content:', error);
 } finally {
 isLoading = false;
 loadingIndicator.style.display = 'none';
 }
}

Server 응답 및 오류 처리

항상 강력한 오류 처리가 포함되어 있습니다. fetch가 실패하면 재량 옵션을 표시하고 retries를 제한하여 무한로드 루프를 피하십시오. 더 나은 사용자 경험을 위해 "Something이 잘못되었습니다"메시지를 "Try again"버튼을 표시합니다.

사용자 경험 향상

Smooth UX는 사용자가 유지하는 데 중요한 역할을 합니다. 여기에 고려해야 하는 몇 가지 개선 사항이 있습니다.

로딩 지표

Spinner, progress bar 또는 skeleton 화면을 사용하여 더 많은 콘텐츠를 fetched라고 나타냅니다. 이 재흡수 사용자는 사이트가 작동하고 있습니다.

<div id="loading" class="loading-spinner"></div>

스피너의 CSS 애니메이션은 경량화. 골격 스크린의 경우, 최종 콘텐츠 레이아웃을 mimics 블록을 만듭니다.

접근성 고려 사항

접근 가능한 무한한 스크롤은:

Focus 관리: 새로운 항목 부하가 있을 때, ]] 지역을 사용하여 화면 리더에 발표.
Keyboard 탐색: 사용자가 키보드(Tab)을 통해 새로 로드된 콘텐츠를 가로질 수 있습니다. 트랩핑 초점이 피하십시오.
무한 스크롤에 대한 영구: 명시적인 컨트롤을 선호하는 사용자를 위한 fallback으로 "Load More" 버튼을 제공합니다.

<div id="content" aria-live="polite">...</div>

모바일 최적화

모바일 장치에서 스크롤 이벤트는 자주 불이지만, Intersection Observer는 더 신뢰할 수 있습니다. 또한, 더 작은 뷰 포트 및 터치 관성에 대한 임계값을 조정합니다.

고급 기술

소셜 미디어 피드 또는 대형 카탈로그와 같은 고성능 상황을 위해 이러한 최적화를 고려하십시오.

Lazy 로딩 이미지

새로운 내용에는 이미지가 포함되어 있습니다. ] 속성을 사용하여 이러한 게으른로드 태그 또는 ]Intersection Observer] 대역폭을 줄이고 초기 로드 시간을 개선합니다.

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="..." />

큰 명부를 위한 가상 스크롤

무한 스크롤은 수천 개의 DOM 노드를 관리하면 성능이 향상됩니다. 가상 스크롤 (또는 창링)은 눈에 띄는 항목 만 렌더링하고 메모리 사용을 극적으로 줄입니다. Clusterize.js 또는 React Virtualized는 도움이 될 수 있지만, 순수 JavaScript 구현은 간단한 경우 가능합니다.