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 자체를 사용하여 태그를 만들 수 있습니다. 예를 들면 :

<code class="language-html"><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></code>

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

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

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