概要

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

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

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

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

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>

#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;
}

作成したドキュメントを表示する場(chǎng)合、[ロード]ボタンをクリックすると、新しい投稿をロ??ードする必要があります?？紤]すべき點(diǎn)がいくつかあります。

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

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

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