キーテイクアウト
- この記事では、無限のスクロールを実装する方法に関する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> class<span>="grid"</span>> <span><span><span><div> class<span>="grid-item grid-item-2"</span>> <span><span><span><p>></p></span>content<span><span></span>></span> </span> <span><span><span></span></span></span></span> </div></span>></span> </span> … <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> id<span>="pagination"</span>></nav></span> </span> <span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span> </span><span><span><span></span>></span></span></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> class<span>="grid"</span>> <span><span><span><div> class<span>="grid-item grid-item-2"</span>> <span><span><span><p>></p></span>content<span><span></span>></span> </span> <span><span><span></span></span></span></span> </div></span>></span> </span> … <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> id<span>="pagination"</span>></nav></span> </span> <span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span> </span><span><span><span></span>></span></span></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> id<span>="posts"</span>></ul></span> </span> <span><span><span><li>></li></span> </span> <span><span><span><article>></article></span>content<span><span></span>></span> </span> <span><span><span></span>></span> </span> … <span><span><span></span>></span> </span> <span><span><span><p> id<span>="loading"</span>></p></span> </span> <span><span><span><img alt="6 jQuery Infinite Scrolling Demos" > src<span>="images/loading.gif"</span> alt<span>="Loading…"</span> /></span> </span><span><span><span></span>></span></span></span></span></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> id<span>="images"</span>></ul></span> </span> <span><span><span><li>></li></span> </span> <span><span><span><a> href<span>="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/"</span>></a></span> </span> <span><span><span><img alt="6 jQuery Infinite Scrolling Demos" > 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></span>></span> </span> <span><span><span></span>></span> </span> … <span><span><span></span>></span></span></span></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番目のページを取得したい場合、対応する番号を押すことで努力せずにできます。使用法 - html
使用法 - javaScript
このコードはES6を使用していることに注意してくださいが、ES5に簡単に変換できます。
<span><span><span><div> class<span>="grid"</span>> <span><span><span><div> class<span>="grid-item grid-item-2"</span>> <span><span><span><p>></p></span>content<span><span></span>></span> </span> <span><span><span></span></span></span></span> </div></span>></span> </span> … <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> id<span>="pagination"</span>></nav></span> </span> <span><span><span><p>></p></span><span><span><a> href<span>="page-2.html"</span>></a></span>Page 2<span><span></span>></span><span><span></span>></span> </span><span><span><span></span>></span></span></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 サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AMJavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。
JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PMjavascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）
Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AMPythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。
Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AMPythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。
PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AMPythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。
JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AMjavascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。
JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AMJavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。
Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AMPythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前ByDDD
Nordhold：Fusion System、説明
4週間前By尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
