6 jQuery Infinite Scrolling Demos

今では無限のスクロールが一般的な機能であり、本当に便利ないくつかのケースがあります。たとえば、TwitterやFacebookなどの優れたページネーションシステムを想像できないウェブサイトがいくつかあります。無限のスクロールが役立つ可能性のある別の例は、検索エンジンに役立つことです。必要なリンクが見つからずに新しいリンクを表示し続けることをお勧めします。また、ページネーションシステムは研究であなたを遅くすることができます。 プロジェクトに無限のスクロールを使用する必要がある場合は、インスピレーションとして使用できる6つのデモを実装できます。 最後のデモを除き、これらのデモはすべてjQueryで書かれており、いくつかの例にはjQueryプラグインを使用していることに注意してください。ただし、他の例は、問題なくバニラJSに簡単に適応できます。

キーテイクアウト

• この記事では、無限のスクロールを実装する方法に関する6つのデモを紹介します。これは、ページネーションリンクをクリックせずにコンテンツを継続的にスクロールできるようにし、ユーザーエクスペリエンスとエンゲージメントを改善することができない機能です。
デモには、グリッド、ブログ投稿、画像、数字、スプレッドシート、および無限のスクロールとペジネーションの組み合わせを介した無限のスクロールが含まれます。各デモはjQueryで書かれていますが、バニラJSに適合させることができ、一部はjQueryプラグインを使用できます。
• ロードメッセージの調整、エラーの処理、動的コンテンツの処理、コンテンツの停止、コンテンツの最適化によるパフォーマンスの改善など、インフィニットスクロールの実装は、プロジェクトのニーズに応じてカスタマイズできます。
• 1。無限のスクロールとグリッド
このデモでは、無限のスクロールプラグインとともにjQuery石積みプラグインを使用します。石積みプラグインは、流体グリッドレイアウトを取得するのに適しています。 Paul Irishによる無限のスクロールプラグインは、すでに存在するページを読み込むのが得意です（したがって、SEOに適しています）。 Page2.html、page3.htmlなどの静的ページをロードするために使用できますが、このプラグインはpage.php？p = 2、page.php？p = 3などの生成されたページも処理します。ただし、それを使用するには、URLにインクリメントするページ番号が必要なため、page.php？data = xxxなどのページがある場合、このプラグインはあなたのためではありません。

使用法 - 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>

2。ブログの投稿を介して無限のスクロール

<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>

このデモは、プラグインやライブラリを使用して、無限のスクロール機能を処理しません。ユーザーがページの終了に到達するたびに、対応するHTMLコードをエコーするPHPスクリプトによって生成された新しい投稿を読み込みます。デモはコンテンツの終わりに到達することはありませんが、たとえば、表示する投稿がなくなると空の文字列をエコーすることでこれを達成できます。ページの最後に、Twitterの精神で読み込み画像を表示します。以下のライブデモでは、CodepenでPHPスクリプトを使用できないため、新しい投稿はJavaScript関数によって生成されることに注意してください。 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>

3。画像を介して無限のスクロール

<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>

このデモは、無限の巻物の画像にロードされ、終わりに到達することはありません。 jQuery Endlessスクロールプラグインを使用して、画面の下部からXピクセル数をロードするトリガーにカスタマイズできます。デモは同じ画像をクロームし、リストの最後にそれらを挿入しますが、スクリプトをカスタマイズして、異なるソースから画像を非常に簡単に読み込むことができます。

CodepenのSitePoint（@SitePoint）の画像をスクロールするペンの無限を参照してください。

使用法 - html

使用法 - jquery

<span><span><span><ul</span> id<span>="posts"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><article</span>></span>content<span><span></article</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span>
</span>
<span><span><span><p</span> id<span>="loading"</span>></span>
</span>	<span><span><span><img</span> src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span>
</span><span><span><span></p</span>></span></span>

4。数字の無限のリスト

このデモは、前のプラグインと同じプラグインを使用しますが、独自の垂直スクロールバーを使用して無限のスクロールをリストに適用しました。下にスクロールすると、数字はリスト項目として追加されます。

<span>$(document).ready(function() {
</span>	<span>var win = $(window);
</span>
	<span>// Each time the user scrolls
</span>	win<span>.scroll(function() {
</span>		<span>// End of the document reached?
</span>		<span>if ($(document).height() - win.height() == win.scrollTop()) {
</span>			<span>$('#loading').show();
</span>
			$<span>.ajax({
</span>				<span>url: 'get-post.php',
</span>				<span>dataType: 'html',
</span>				<span>success: function(html) {
</span>					<span>$('#posts').append(html);
</span>					<span>$('#loading').hide();
</span>				<span>}
</span>			<span>});
</span>		<span>}
</span>	<span>});
</span><span>});</span>

CodepenのSitePoint（@SitePoint）による数字の無限のリストを参照してください。

使用法 - html

使用法 - jquery

5。無限のスプレッドシート

<span><span><span><ul</span> id<span>="images"</span>></span>
</span>	<span><span><span><li</span>></span>
</span>		<span><span><span><a</span> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></span>
</span>			<span><span><span><img</span> src<span>="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480"</span> alt<span>=""</span> /></span>
</span>		<span><span><span></a</span>></span>
</span>	<span><span><span></li</span>></span>
</span>
	…
<span><span><span></ul</span>></span></span>

このデモは、デモ2と同じ手法を使用して、ユーザーが垂直にだけでなく水平方向にもドキュメントの終わりに到達したときを検出します。一方の端に到達するたびに、新しい行または新しい列をテーブルに追加します。スプレッドシートアプリケーションを作成したい場合、まさに書くことができるスクリプトの種類です。

すべてのセルが空であることに注意してください。行と列のインデックスは、CSSカウンターで生成されるため、自分で計算する必要はありません。 CodepenのSitePoint（@SitePoint）のペンの無限のスプレッドシートを参照してください。

使用法 - html

<span>$(document).ready(function() {
</span>	<span>$(window).endlessScroll({
</span>		<span>inflowPixels: 300,
</span>		<span>callback: function() {
</span>			<span>var $img = $('#images li:nth-last-child(5)').clone();
</span>			<span>$('#images').append($img);
</span>		<span>}
</span>	<span>});
</span><span>});</span>

使用法 - jquery

6。無限のスクロールページネーション

無限のスクロールに対して短所があります。それがうまく実装されていない場合、ユーザーエクスペリエンスが壊れる可能性があります。ユーザーに無限のリストをロードさせた場合、しばらくすると位置を失う可能性があります。それは、従来のページネーションシステムに決して追加されないものです。ただし、ページネーションには、無限のスクロールに必要ではないユーザーからのアクションが必要です。

これらの2つの事実は、Tim Severienにアイデアを与えました。両方の方法を活用するために、無限のスクロールとページネーションを組み合わせた場合はどうなりますか？結果は、この最後のデモです。

初期ページがユーザーに表示されます。ユーザーが下にスクロールしてページの下部に到達すると、新しいページが自動的にロードされます。ここでは、無限のスクロールからのシンプルさを楽しんでいます。しかし、新しいことは画面の下部に固定されたリストから来ています。

最初に非表示になったこのリストは、新しいページがロードされるたびに、このページの数を記入するたびに記入されています。そうすれば、ユーザーが2番目のページを取得したい場合、対応する番号を押すことで努力せずにできます。 codepenのSitePoint（@sitepoint）によるペンの無限の巻物のページネーションを参照してください。

使用法 - html

使用法 - javaScript

このコードはES6を使用していることに注意してくださいが、ES5に簡単に変換できます。

<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>

結論

無限のスクロールを実装する6つの異なる例を調べました。何を構築しようとしていても、これらのテクニックのいずれかを使用して、必要な結果を実現できるはずです。いつものように、私たちはあなたの考えを聞きたいです。これらのプラグインやテクニックのいずれかで何かクールなものを作りましたか？言及すべきだったと思うお気に入りのプラグインはありますか？コメントでお知らせください！

<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>

jQuery Infiniteスクロールに関するよくある質問（FAQ）

WebサイトでjQuery Infiniteスクロールを実装するにはどうすればよいですか？

jQuery Infiniteスクロールの実装には、いくつかのステップが含まれます。まず、HTMLファイルにjQueryライブラリとInfiniteスクロールプラグインを含める必要があります。次に、プラグインを初期化し、無限にロードするコンテンツを指定する必要があります。これを行うには、ItemSelectorオプションを使用して、コンテンツのクラスまたはIDを指すことができます。最後に、パスオプションを使用して、次のコンテンツセットへのパスを指定する必要があります。これは、URLまたはURLを返す関数にすることができます。ページネーションリンクをクリックすることなく、ユーザーがコンテンツを閲覧できるようにすることで、ユーザーエクスペリエンスが向上します。コンテンツは必要なときにのみロードされるため、サーバーの負荷も削減されます。さらに、ユーザーはコンテンツをスクロールして探索し続ける可能性が高いため、ウェブサイトでのエンゲージメントと時間を増やすことができます。 、jquery Infiniteスクロールでロードメッセージをカスタマイズできます。プラグインは、ロードと呼ばれるオプションを提供します。これにより、コンテンツのロード中に表示するテキストと画像を指定できます。 CSSを使用して、ロードメッセージをスタイリングすることもできます。

jQuery Infiniteスクロールのエラーを処理するにはどうすればよいですか？

​​

jQuery Infiniteスクロールのエラーを処理することで、エラーコールバックを使用して実行できます。この関数は、プラグインがコンテンツのロードに失敗したときに呼び出されます。このコールバックを使用してエラーメッセージを表示したり、他のアクションを実行したりできます。

動的コンテンツでjQuery Infiniteスクロールを使用できますか？プラグインは、INFSCR（ 'bind'）と呼ばれるメソッドを提供します。これは、無限のスクロール機能を新しくロードされたコンテンツにバインドするために呼び出すことができます。

INFSCR（「Destroy」）メソッドを呼び出すことでコンテンツがなくなると、JQuery Infiniteスクロールを停止できます。これにより、無限のスクロール機能が削除され、さらなるコンテンツがロードされないようにします。 。ただし、他のプラグインが無限のスクロールと互換性があり、その機能に干渉しないようにする必要があります。ページを下にスクロールし、新しいコンテンツがロードされているかどうかを確認します。ブラウザ開発者ツールを使用してネットワークリクエストを監視し、新しいコンテンツが要求されて正しくロードされているかどうかを確認することもできます。モバイルデバイスで動作します。ただし、ウェブサイトが応答性があり、無限のスクロール機能がさまざまな画面サイズでうまく機能するようにする必要があります。コンテンツを最適化することにより、jQuery Infiniteスクロールのパフォーマンス。これには、画像のサイズの削減、CSSおよびJavaScriptファイルの模倣、サーバー側のページネーションを使用して、一度にロードされたコンテンツの量を制限することが含まれます。怠zyなロードを使用して、ビューポートにあるときに画像をロードすることもできます。

以上が6 jQuery Infinite Scrolling Demosの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。