6 jQuery Infinite 스크롤 데모

Infinite Scrolling은 이제 일반적인 기능이며 실제로 유용한 몇 가지 사례가 있습니다. 예를 들어, 트위터 나 페이스 북과 같은 좋은 페이지 매김 시스템을 상상할 수없는 웹 사이트가 있습니다. Infinite 스크롤이 유용 할 수있는 곳의 또 다른 예는 검색 엔진입니다. 원하는 링크를 찾지 못하는 동안 새로운 링크를 계속 보려고하며 Pagination 시스템은 연구에서 속도를 늦출 수 있습니다. 프로젝트에 Infinite 스크롤을 사용해야하는 경우 다음은 영감으로 사용할 수있는 6 가지 데모가 있습니다. 마지막을 제외 하고이 모든 데모는 jQuery로 작성되며 일부 예제는 jQuery 플러그인을 사용하고 있습니다. 그러나 다른 예제는 아무런 문제없이 바닐라 JS에 쉽게 조정할 수 있습니다. 키 테이크 아웃

이 기사는 Paginite Scrolling을 구현하는 방법에 대한 6 개의 데모를 제시합니다. 이는 페이지 매김 링크를 클릭하지 않고 컨텐츠를 지속적으로 스크롤하여 사용자 경험 및 참여를 개선 할 수없는 기능입니다. 데모에는 그리드, 블로그 게시물, 이미지, 숫자, 스프레드 시트를 통한 무한 스크롤 및 무한 스크롤 및 페이지 매김의 조합이 포함됩니다. 각 데모는 jQuery로 작성되지만 바닐라 JS에 적응할 수 있으며 일부는 jQuery 플러그인을 사용합니다. 무한 스크롤의 구현은로드 메시지 조정, 오류 처리, 동적 콘텐츠 작업, 더 이상 콘텐츠가없는 경우 중지 및 컨텐츠를 최적화하여 성능 향상과 같은 프로젝트의 요구에 따라 사용자 정의 할 수 있습니다.

1. 무한 스크롤 및 그리드
• 이 데모는 jQuery Masonry 플러그인을 Infinite 스크롤 플러그인과 함께 사용합니다. Masonry 플러그인은 유체 그리드 레이아웃을 얻는 데 좋습니다. Paul Irish의 Infinite Scroll 플러그인은 이미 존재하는 페이지를로드하는 데 능숙합니다 (따라서 SEO에 좋습니다). Page2.html, Page3.html 등과 같은 정적 페이지를로드하는 데 사용할 수 있지만이 플러그인은 Page.php? p = 2, page.php? p = 3과 같은 생성 된 페이지를 처리합니다. 그러나 사용하려면 URL을 증가시킬 페이지 번호가 있어야하므로 Page.php? data = xxx와 같은 페이지가 있으면이 플러그인은 귀하를위한 것이 아닙니다.
사용 - html
• 사용 - jQuery
• 2. 블로그 게시물을 통해 무한 스크롤
이 데모는 플러그인이나 라이브러리를 사용하여 무한 스크롤 기능을 처리하지 않습니다. 페이지 끝에 사용자가 페이지 끝에 도달 할 때마다 해당 HTML 코드를 반영하는 PHP 스크립트에 의해 생성 된 새 게시물이로드됩니다. 데모는 콘텐츠의 끝에 도달하지 않지만 더 이상 표시 할 게시물이 없을 때 빈 문자열을 반영하여이를 달성 할 수 있습니다. 우리는 페이지 끝에 트위터의 정신으로 로딩 이미지를 표시합니다. 아래의 라이브 데모에서 새 게시물은 Codepen에서 PHP 스크립트를 사용할 수 없으므로 JavaScript 함수에 의해 생성됩니다. Codepen에서 Sitepoint (@SitePoint)의 블로그 게시물을 통해 펜 무한 스크롤을 참조하십시오. 사용 - html 사용 - jQuery

3. 이미지

를 통해 무한 스크롤 이 데모는 무한 스크롤의 이미지에서로드되며 끝에 도달하지 않습니다. jQuery endless 스크롤 플러그인을 사용하여 화면 하단에서 X 수의 픽셀을로드하기 위해 사용자 정의 할 수 있습니다. 데모는 동일한 이미지를 복제하고 목록의 끝에서 삽입하지만 스크립트는 다른 소스의 이미지를 아주 쉽게로드하도록 사용자 정의 할 수 있습니다. Codepen에서 sitepoint (@sitepoint)로 이미지를 통해 펜 무한 스크롤을 참조하십시오. 사용 - html

사용 - jQuery

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

4. 무한 숫자 목록 이 데모는 이전 플러그인과 동일한 플러그인을 사용하지만 자체 수직 스크롤 바가있는 목록에 무한 스크롤을 적용했습니다. 아래로 스크롤하면 숫자는 단순히 목록 항목으로 추가됩니다. Codepen에서 sitepoint (@SitePoint)에 의한 무한한 숫자 목록을 참조하십시오. 사용 - html

사용 - jQuery

<span>$(document).ready(function() {
</span>	<span>var grid = $('.grid');
</span>
	grid<span>.masonry({
</span>		<span>itemSelector: '.grid-item',
</span>		<span>columnWidth: 200
</span>	<span>});
</span>
	grid<span>.infinitescroll({
</span>		<span>// Pagination element that will be hidden
</span>		<span>navSelector: '#pagination',
</span>
		<span>// Next page link
</span>		<span>nextSelector: '#pagination p a',
</span>
		<span>// Selector of items to retrieve
</span>		<span>itemSelector: '.grid-item',
</span>
		<span>// Loading message
</span>		<span>loadingText: 'Loading new items…'
</span>	<span>},
</span>
	<span>// Function called once the elements are retrieved
</span>	<span>function(new_elts) {
</span>		<span>var elts = $(new_elts).css('opacity', 0);
</span>
		elts<span>.animate({opacity: 1});
</span>		grid<span>.masonry('appended', elts);
</span>	<span>});
</span><span>});</span>

5. 무한 스프레드 시트

이 데모는 Demo 2와 동일한 기술을 사용하여 사용자가 수직뿐만 아니라 수평 적으로도 문서의 끝에 도달했을 때를 감지합니다. 한쪽 끝에 도달 할 때마다 테이블에 새 행이나 새 열을 추가합니다. 스프레드 시트 응용 프로그램을 만들려면 쓸 수있는 스크립트의 종류입니다. 모든 셀은 비어 있습니다. 행 및 열 인덱스는 CSS 카운터로 생성되어 직접 계산할 필요가 없습니다. Codepen에서 Sitepoint (@SitePoint)의 펜 무한 스프레드 시트를 참조하십시오. 사용 - html

사용 - jQuery
6. 무한 스크롤링 페이지 매김

무한 스크롤에 대한 단점이 있습니다. 잘 구현되지 않으면 사용자 경험을 깨뜨릴 수 있습니다. 사용자가 무한한 목록을로드하게하면 잠시 후에 자리를 잃을 수 있습니다. 그것은 전통적인 페이지 매김 시스템으로 절대 추가되지 않는 것입니다. 그러나 Pagination은 무한 스크롤에 필요하지 않은 사용자의 조치가 필요합니다.이 두 가지 사실은 Tim Severien에게 아이디어를 주었다. 결과는이 마지막 데모입니다.

초기 페이지가 사용자에게 표시됩니다. 사용자가 아래로 스크롤하여 페이지 하단에 도달하면 새 페이지가 자동으로로드됩니다. 여기서 우리는 Infinite Scrolling의 단순성을 즐깁니다. 그러나 새로운 것들은 화면 하단에 고정 된 목록에서 나옵니다.

처음에는 숨겨져있는이 목록은 새 페이지가로드 될 때 마다이 페이지의 수를 채울 때마다 채워집니다. 이렇게하면 사용자가 두 번째 페이지를 검색하려면 해당 번호를 누르면 아무런 노력없이 할 수 있습니다.

. Codepen에서 Sitepoint (@SitePoint)에 의한 PEN 무한 스크롤 페이지를 참조하십시오. 사용 - html

사용 - JavaScript 이 코드는 ES6을 사용하지만 ES5로 쉽게 변환 할 수 있습니다.
결론 우리는 무한 스크롤을 구현하는 6 가지 예를 살펴 보았습니다. 무엇을 구축하려고하든 이러한 기술 중 하나를 사용하여 원하는 결과를 얻을 수 있어야합니다. 항상 그렇듯이, 우리는 당신의 생각을 듣고 싶습니다.이 플러그인이나 기술 중 하나로 멋진 것을 만들었습니까? 언급되었다고 생각하는 좋아하는 플러그인이 있습니까? 의견에 알려주십시오!

jQuery Infinite Scrolling에 대한 자주 묻는 질문 (FAQ) 내 웹 사이트에서 jquery infinite 스크롤을 구현하려면 어떻게해야합니까?

웹 사이트에서 jQuery Infinite 스크롤 구현에는 몇 단계가 필요합니다. 먼저 HTML 파일에 jQuery 라이브러리와 Infinite Scroll 플러그인을 포함해야합니다. 그런 다음 플러그인을 초기화하고 무한히로드하려는 컨텐츠를 지정해야합니다. 항목 선거 옵션을 사용하여 컨텐츠의 클래스 또는 ID를 가리키면이 작업을 수행 할 수 있습니다. 마지막으로 경로 옵션을 사용하여 다음 컨텐츠 세트로의 경로를 지정해야합니다. 이것은 URL 또는 URL을 반환하는 함수 일 수 있습니다.

jQuery Infinite 스크롤 사용의 이점은 무엇입니까?

<span><span><span><div</span> class<span>="grid"</span>></span>
</span>	<span><span><span><div</span> class<span>="grid-item grid-item-2"</span>></span>
</span>		<span><span><span><p</span>></span>content<span><span></p</span>></span>
</span>	<span><span><span></div</span>></span>
</span>	…
<span><span><span></div</span>></span>
</span>
<span><!-- The next page which content will be loaded when scrolled -->
</span><span><span><span><nav</span> id<span>="pagination"</span>></span>
</span>	<span><span><span><p</span>></span><span><span><a</span> href<span>="page-2.html"</span>></span>Page 2<span><span></a</span>></span><span><span></p</span>></span>
</span><span><span><span></nav</span>></span></span>

jQuery Infinite 스크롤링은 몇 가지 이점을 제공합니다. Pagination 링크를 클릭하지 않고도 사용자가 콘텐츠를 탐색 할 수 있도록하여 사용자 경험을 향상시킵니다. 콘텐츠가 필요할 때만로드되므로 서버로드를 줄입니다. 또한 사용자가 컨텐츠를 계속 스크롤하고 탐색 할 가능성이 높기 때문에 웹 사이트에 소요되는 시간을 증가시킬 수 있습니다.

jQuery Infinite 스크롤에서로드 메시지를 사용자 정의 할 수 있습니까? , jQuery Infinite 스크롤에서로드 메시지를 사용자 정의 할 수 있습니다. 플러그인은로드라는 옵션을 제공하므로 컨텐츠가로드되는 동안 표시 할 텍스트 및 이미지를 지정할 수 있습니다. CSS를 사용하여 로딩 메시지를 스타일링 할 수도 있습니다.

jQuery Infinite Scrolling에서 오류를 처리 할 수있는 방법은 무엇입니까?
jQuery Infinite 스크롤의 오류 처리 오류는 오류 콜백을 사용하여 수행 할 수 있습니다. 이 기능은 플러그인이 컨텐츠를로드하지 않을 때 호출됩니다. 이 콜백을 사용하여 오류 메시지를 표시하거나 다른 작업을 수행 할 수 있습니다.

동적 콘텐츠와 함께 jQuery Infinite 스크롤을 사용할 수 있습니까?

예, jQuery Infinite 스크롤은 동적 컨텐츠와 함께 사용할 수 있습니다. 플러그인은 Infscr ( 'bind')이라는 메소드를 제공합니다.이 메소드는 무한 스크롤 기능을 새로로드 된 컨텐츠에 바인딩하기 위해 호출 할 수 있습니다.

더 이상 콘텐츠가 없을 때 jQuery 무한 스크롤을 중지하려면 어떻게해야합니까?

infscr ( 'destroy') 메소드를 호출하여 더 이상 내용이 없을 때 jQuery Infinite 스크롤을 중지 할 수 있습니다. 이것은 무한 스크롤 기능을 제거하고 추가 컨텐츠가로드되는 것을 방지 할 것입니다.

다른 jQuery 플러그인과 함께 jQuery Infinite 스크롤을 사용할 수 있습니까?

예, jQuery Infinite 스크롤링을 다른 jQuery 플러그인과 함께 사용할 수 있습니다. . 그러나 다른 플러그인이 무한 스크롤과 호환되고 기능을 방해하지 않도록해야합니다.

jQuery Infinite Scrolling을 어떻게 테스트 할 수 있습니까?

jQuery Infinite Scrolling을 테스트 할 수 있습니다. 페이지를 아래로 스크롤하고 새 콘텐츠가로드되었는지 확인합니다. 브라우저 개발자 도구를 사용하여 네트워크 요청을 모니터링하고 새 컨텐츠가 제대로 요청되고 올바르게로드되는지 확인할 수도 있습니다.

모바일 장치에서 jQuery Infinite 스크롤을 사용할 수 있습니까?

예, jQuery Infinite Scrolling 모바일 장치에서 작동합니다. 그러나 웹 사이트가 반응이 좋고 무한 스크롤 기능이 다양한 화면 크기에서 잘 작동하는지 확인해야합니다.

jQuery Infinite 스크롤의 성능을 어떻게 향상시킬 수 있습니까?

개선 할 수 있습니다. 콘텐츠를 최적화하여 jQuery Infinite 스크롤의 성능. 여기에는 이미지의 크기를 줄이고 CSS 및 JavaScript 파일을 조정하고 서버 측 페이지를 사용하여 한 번에로드 된 컨텐츠의 양을 제한하는 것이 포함됩니다. 게으른로드를 사용하여 이미지가 뷰포트에있을 때만로드 할 수 있습니다.

위 내용은 6 jQuery Infinite 스크롤 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!