Ajax - リストの読み込みを制限し、残りの部分をスクロールに読み込みます。

Question

カテゴリのすべての商品を1ページに表示する店舗があります（これはオーナーが好きなのでページネーションはオプションではありません）。

いくつかの重いカテゴリの読み込み時間を改善するために、<li>sという数の商品を読み込み、ページスクロールで別のセットを読み込むスクリプトを実装したいと考えています。

ページは、理想的には私がしたいと思い、この構造

<div id="CategoryContent"> 
    <ul class="ProductList"> 
     <li class="Odd">Product</li> 
     <li class="Even">Product</li> 
     <li class="Odd">Product</li> 
     <li class="Even">Product</li> 
    </ul> 

で生成されます。最初に25 <li>Products</li>をロードし、ユーザーが下にスクロールすると、ページ全体がロードされるまで次の20をロードします。

ので、私はかどうかわからないんだけど前に、私はAJAXと遊んだことがありません

：それは可能です

現在の設定

はロード時間を改善するために行くと

私はいくつかを見ているそれらのページ

のためのSEOに影響を与えます例とデモのようなTHIS JQUERY EXAMPLE - しかし、これは特定のIDなどを必要とし、私はそれがページの読み込みを改善するかどうかはわかりません？

Answer 1

これは無限スクロールという概念です。 Googleのために、あなたはあなたが探しているものを見つけるでしょう。

infinite-scroll-jquery-pluginは、あなたがやろうとしていることをサポートするjQueryプラグインです。他にもあります。

Answer 2

あなたのリンクにあるようなプラグインが見つからない限り、JSONでAjaxを返す可能性が最も高いので、そこから値を処理してページに入れる必要があります。

$.get()または$.getJSON()のドキュメントを読むことをお勧めします。これらのリンクでも同様にJSONデータを解析する方法についての例があります。

一度に100個のレコードではなく、一度に20個のレコードしか読み込まない場合は、読み込み時間が改善されます。

AjaxとSEOでは、これを達成するために特定の技術が使用されていますが、Webスパイダーにとって通常の非Ajaxコンテンツと同じようにSEOにとって肯定的であるかどうかはわかりません。ここに私がこの主題についてオンラインで見つけた資料があります：http://www.searchenginejournal.com/seo-for-ajax/19138/

Answer 3

ローディング時間の問題は修正されませんが、プラグインを必要とせずに無限スクロールのかなり簡単なjqueryソリューションを作成しました。

$("#CategoryContent li").slice(20).hide(); 

これは、リストの最初の20個の製品以外のすべてを非表示にします。ユーザーのための

var mincount = 20; 
var maxcount = 40; 


$(window).scroll(function() 
        { 
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) { 
          $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800); 

mincount = mincount+20; 
maxcount = maxcount+20 

} 
}); 

ウェイツは、次の20でフェードイン、および製品のすべてがロードされるまで繰り返され、ページの下部から400ピクセルを超えてスクロールします。