jQuery에서 무한 스크롤을 구현합니다-JS 튜토리얼-php.cn

Implementing Infinite Scroll in jQuery 키 포인트 요약

무한 스크롤 (게으른로드 또는 페이징 없음)은 페이징의 대안으로, 사용자가 페이지에서 기존 컨텐츠 스크롤을 완료 할 때 AJAX를 통해 새로운 컨텐츠를로드합니다. 무한 스크롤링에는 많은 장점이 있지만 스트림의 위치를 저장할 수없고 검색 엔진 친화적이지 않은 것과 같은 몇 가지 단점도 있습니다. 검색 엔진의 문제를 피하려면 페이징 또는 사이트 맵이있는 대안을 제공해야합니다.

Infinite Scrolling 구현에는 기본 HTML 및 CSS 레이아웃 생성, 요청 처리를위한 AJAX 모드 설정, 페이지에 새 데이터를 추가하고 처리 데이터를 종료하는 것이 포함됩니다.

사용자가 페이지 끝까지 스크롤하고 JSON을 통해 원시 데이터를 보내고 jQuery 자체를 사용하여 태그를 작성하고 메시지를 포함시킬 때 버튼을 삭제하고 기능을 호출함으로써 무한 스크롤의 구현을 더욱 향상시킬 수 있습니다. JSON 응답은 요청이 올바르게 완료되었는지 여부와로드 할 게시물이 더 있는지 설명합니다.

웹 개발자는 표시 할 컨텐츠가 많을 때 오랫동안 전통적인 페이징으로 바뀌 었습니다. 예, Pagination은 여전히 콘텐츠를 표시하는 매우 효과적인 방법이지만이 기사에서는 대안 인 Infinite 스크롤에 대해 논의 할 것입니다. 이 기술을 게으른로드 또는 페이지 매김이라고도하며 사용자가 페이지에서 기존 컨텐츠 스크롤을 완료하면 AJAX를 통해 새로운 콘텐츠를로드합니다. Facebook 및 Pinterest를 포함한 일부 인터넷 거인은 무제한 스크롤을 사용하고 있습니다. 이 기사에서는 무한 스크롤을위한 자신의 jQuery 플러그인 구축에 대해 논의 할 것입니다.

트레이더 및 다운스 장점은 분명합니다. 더 많은 콘텐츠를 얻으려면 새 페이지로 리디렉션 할 필요가 없습니다 (페이지가로드 될 때 다른 영역으로주의를 돌리는 경향이 있습니다). 무한 스크롤을 구현하면 기본적으로 페이지에서 사용자의 초점을 제어 할 수 있습니다! 무한 스크롤이 모든 경우에 효과적인 것은 아닙니다. 예를 들어, 사용자가 링크를 클릭하고 브라우저의 뒤로 버튼을 사용하면 사용자는 AJAX를 통해로드 된 데이터 스트림의 위치를 잃습니다. 이 기능을 구현할 때 주목해야 할 한 가지는 새 탭이나 창에 새 컨텐츠를로드하는 것입니다. 무한 스크롤의 관련 단점은 스트림의 위치를 저장할 수 없다는 것입니다. 무제한 스크롤 페이지의 콘텐츠를 이메일을 통해 친구와 공유하고 싶다고 가정 해 봅시다. URL이 초기 위치로 돌아 가기 때문에이 작업을 수행 할 수 없습니다. 따라서 계속 사용하기 전에 웹 사이트의 가용성을 고려하십시오. 또한 무한 스크롤을 구현하기 전에 검색 엔진 친화적이지 않다는 것을 기억하십시오. 검색 엔진 가시성에 대한 문제를 피하려면 페이징 또는 사이트 맵을 대안으로 제공하십시오.

시작

우리는 매우 간단한 페이지를 만드는 것으로 시작합니다. 다음은 예제 HTML 및 CSS의 중요한 부분을 보여줍니다. 나머지 파일은이 튜토리얼의 끝에서 데모 링크를 클릭하여 볼 수 있습니다.

html

css 기본 워크 플로우

우리가 만든 문서를 보면 더 많은로드 버튼을 클릭하면 새 게시물이로드되어야합니다. 고려해야 할 사항은 다음과 같습니다.

요청을 페이지에 첨부 할 새 항목을 반환하는 URL에 요청해야합니다.

버튼을 다시 클릭하면이 프로세스를 반복해야하지만 두 번째로는 최신 게시물을 반환해야합니다.

더 이상 게시물이 표시되지 않을 때까지 각 후속 요청에 대해 새 게시물이 제공되어야합니다.

더 이상 게시물이 남지 않으면 사용자에게 끝에 도달했다고 말해야합니다.

Ajax 모드

이상적으로는 페이지 번호를 저장하려면 변수를 선언해야하며, 이로 인해 요청을 보내려는 URL이 변경됩니다. 데모에는 3 개의 페이지 (2.html, 3.html 및 빈 4.html)가 있습니다 (데모 목적). 더 많은 게시물을로드하기 위해 버튼을 클릭하면 요청이 성공적으로 완료되고 새 프로젝트가로드되기까지 시간이 걸립니다. 이 경우로드 버튼을 숨기고 새 프로젝트가로드되고 있음을 나타내는 텍스트를 표시합니다.

페이지 에 데이터를 첨부하십시오 먼저, 요청이 이루어질 때 수행 한 변경 사항을 취소해야합니다. 즉, 더 많은로드 버튼을 다시 표시하고 텍스트를 숨 깁니다. 둘째, 우리는 이미 페이지에 존재하는 항목 목록에 대한 응답을 추가해야합니다. 데모에서는 작업을 단순화하기 위해 HTML 태그를 직접받습니다. 또한 메시지 나 상태와 같은 더 많은 변수를 추가하여 JSON 응답을 보낼 수도 있습니다. 추가 코드는 다음과 같습니다.

처리 데이터의 끝 게시물의 끝에 도달하면 페이지에 더 이상 게시 할 게시물이 없음을 사용자에게 표시해야합니다. 이것은 여러 가지 방법으로 수행 할 수 있습니다. 응답 자체에 포함 된 코드 또는 메시지를 통해 상태를 보낼 수 있습니다. 그러나이 경우 HTML 태그를 직접 사용하므로 빈 응답은 스트림의 끝을 나타냅니다. 결론

우리가 제안한 데모는 본질적으로 매우 기본적이며 더 많은 노력을 기울이면 더 잘할 수 있습니다. 먼저 버튼을 완전히 삭제하고 사용자가 페이지 끝까지 아래로 스크롤 할 때 기능을 호출 할 수 있습니다. 이렇게하면 사용자가 버튼을 클릭하고 전체 프로세스를 더 빠르게 만들 수있는 추가 단계가 제거됩니다. 둘째, JSON을 통해 원시 데이터를 보내고 jQuery 자체를 사용하여 태그를 만들 수 있습니다. 예를 들면 :

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

로그인 후 복사

마지막으로, JSON 응답에는 요청이 올바르게 완료된 메시지, 데이터 및 더 많은 게시물이 있는지 여부가 포함될 수 있습니다. 이 경우 이것은 응답을 보내는보다 효율적인 방법입니다. 무제한 스크롤에 대한 자세한 내용은이 목적을 위해 특별히 생성 된 웹 사이트를 방문 할 수 있습니다. 여기에는 아이디어에 대한 일반 정보와 웹 사이트에서 사용할 수있는 기존 도구가 포함되어 있습니다. 라이브 데모는 Github 페이지에서 찾을 수 있습니다. 이 코드는 Github에서도 사용할 수 있습니다.

(FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분의 내용은 원래 텍스트와 우연의 일치이며 의사 원리는 어렵고 어렵습니다. 수정 후 기사의 무결성과 논리에 영향을 미칩니다

위 내용은 jQuery에서 무한 스크롤을 구현합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!