jqueryに無限の巻物を実装します

キーポイントの概要

概要

• 無限のスクロール（Lazy LoadingまたはNo Pagingとも呼ばれます）は、ページ上の既存のコンテンツのスクロールを完了すると、AJAXを介して新しいコンテンツをロードするページングの代替品です。
• 無限のスクロールには多くの利点がありますが、ストリーム内の場所を保存できず、検索エンジンフレンドリーではないなど、いくつかの欠点もあります。検索エンジンの問題を回避するには、ページングまたはサイトマップを備えた代替品を提供する必要があります。
• Infiniteスクロールの実装には、基本的なHTMLおよびCSSレイアウトの作成、リクエストの処理用AJAXモードの設定、ページへの新しいデータの追加、および処理データの終了が含まれます。
• ボタンを削除し、ユーザーがページの最後までスクロールし、JSONを介して生データを送信し、jQuery自体を使用してタグを作成し、メッセージを含めると関数を呼び出すことで、無限のスクロールの実装をさらに改善できます。 JSONの応答は、リクエストが正しく完了したかどうか、およびロードする投稿が増えるかどうかを説明します。

Web開発者は、表示されるコンテンツが多数ある場合、長い間従来のページングに頼りました。はい、ページネーションは依然としてコンテンツを表示するための非常に効果的な方法ですが、この記事では、代替の無限のスクロールについて説明します。この手法は、怠zyなロードまたはページネーションとも呼ばれ、ユーザーがページ上の既存のコンテンツのスクロールを完了すると、AJAXを介して新しいコンテンツをロードします。 FacebookやPinterestを含む一部のインターネット大手は、無制限のスクロールを使用しています。この記事では、無限のスクロール用の独自のjQueryプラグインの構築について説明します。

トレーダーとダウン 利点は明らかです。より多くのコンテンツを取得するには、新しいページにリダイレクトする必要はありません（これは、ページが読み込まれたときにさまざまな領域に注意をシフトする傾向があります）。 Infiniteスクロールを実装することにより、基本的にユーザーのページへの焦点を制御できます！無限のスクロールは、すべての場合に効果的ではありません。たとえば、ユーザーがリンクをクリックしてブラウザのバックボタンを使用すると、ユーザーはAjaxを介してロードされたデータストリームの場所を失います。この機能を実装するときに注意すべきことの1つは、新しいタブまたはウィンドウに新しいコンテンツをロードすることです。無限のスクロールの関連する欠点は、ストリーム内の場所を保存できないことです。無制限のスクロールページでコンテンツを電子メールで友達と共有したいとします。これは、URLが最初の場所に戻ってくるため、これを行うことはできません。したがって、使用を続ける前に、ウェブサイトの可用性を検討してください。また、無限のスクロールを実装する前に、それはあまり検索エンジンに優しいわけではないことを忘れないでください。検索エンジンの可視性に関する問題を回避するには、ページングまたはサイトマップを備えた代替案を提供してください。

start

非常にシンプルなページを作成することから始めます。以下は、HTMLおよびCSSの例の重要な部分を示しています。残りのファイルは、このチュートリアルの最後にあるデモリンクをクリックすることで表示できます。

html

css

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

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

基本的なワークフロー

作成したドキュメントを表示する場合、[ロード]ボタンをクリックすると、新しい投稿をロ​​ードする必要があります。考慮すべき点がいくつかあります。

• ページに添付される新しいアイテムを返すURLにリクエストを行う必要があります。
• もう一度ボタンをクリックすると、このプロセスを繰り返す必要がありますが、2回目は新しい投稿を返す必要があります。
• これ以上の投稿が表示されるまで、後続のリクエストごとに新しい投稿を提供する必要があります。
• 残りの投稿がなくなると、ユーザーに終わりに達したことをユーザーに伝える必要があります。

ajaxモード

理想的には、ページ番号を保存するために変数を宣言する必要があります。これにより、リクエストを送信するURLが変更されます。デモには、2.html、3.html、および空の4.html（デモンストレーション目的）の3つのページがあります。ボタンをクリックしてより多くの投稿を読み込むと、リクエストが正常に完了し、新しいプロジェクトをロードするまでに時間がかかります。この場合、ロードボタンを非表示にし、新しいプロジェクトがロードされていることを示すテキストを表示します。

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

データをページに添付します

最初に、リクエストが作成されたときに実行した変更を元に戻す必要があります。つまり、ロードボタンをもう一度表示してテキストを非表示にします。次に、ページに既に存在するアイテムのリストに受け取った応答を追加する必要があります。デモでは、操作を簡素化するためにHTMLタグを直接受信することに注意してください。また、JSON応答を送信して、メッセージやステータスなどの変数を追加することもできます。追加のコードを以下に示します。

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

処理データの終了

投稿の最後に到達したら、ページにロードする投稿がもうないことをユーザーに示す必要があります。これはさまざまな方法で実行できます。応答自体に組み込まれたコードまたはメッセージを介して州を送信できます。ただし、この場合はHTMLタグを直接使用するため、空の応答はストリームの終わりを表します。

$(buttonId).hide();
$(loadingId).show();

結論

私たちが提案したデモは、本質的に非常に基本的なものであり、もっと努力すればもっと良いことができます。まず、ボタンを完全に削除し、ユーザーがページの最後までスクロールしたときに関数を呼び出すことができます。これにより、ユーザーがボタンをクリックしてプロセス全体をより速くするための追加のステップが排除されます。第二に、JSONを介して生データを送信し、jQuery自体を使用してタグを作成することができます。たとえば、

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

最後に、JSON応答には、リクエストが正しく完了したというメッセージ、データ、およびロードする投稿が増えるかどうかを含めることができます。この場合、これは応答を送信するためのより効率的な方法です。無制限のスクロールの詳細については、この目的のために作成されたWebサイトにアクセスできます。これには、ウェブサイトで使用できるアイデアと既存のツールに関する一般的な情報が含まれています。ライブデモはGitHubページにあります。コードはGitHubでも利用できます。

（記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。FAQパーツの内容は元のテキストと非常に偶然のものであり、擬似オリジナルは困難であり、変更後、それは記事と論理の完全性に影響します

以上がjqueryに無限の巻物を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。