3

あるカテゴリのすべての製品を 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 などが必要で、ページの読み込みが改善されるかどうかわかりません。

    4

    3 に答える 3

    6

    読み込み時間の問題は解決しませんが、プラグインを必要としない、無限スクロールに対するかなり単純な 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

}
});

    ユーザーがページの下部から 400 ピクセルを超えてスクロールするのを待ってから、次の 20 ピクセルでフェードインし、すべての製品が読み込まれるまで繰り返します。

    于 2012-05-03T02:12:54.600 に答える
    4

    これは無限スクロールと呼ばれる概念です。Google で検索すれば、探しているものが見つかります。

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

    于 2012-05-02T02:34:06.973 に答える
    0

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

    $.get()詳細については、または のドキュメントをお読みになることをお勧めします$.getJSON()。これらのリンクで、JSON データを解析する方法の例をここで見つける必要があります。

    一度に 100 レコードではなく 20 レコードのみをロードする場合は、ロード時間が改善されます。

    Ajax と SEO など、これを達成するために人々が使用する特定の手法がありますが、Web スパイダーに対する通常の非 Ajax コンテンツと同じくらい SEO に有効かどうかはわかりません。このテーマについてオンラインで見つけたリソースを次に示します: http://www.searchenginejournal.com/seo-for-ajax/19138/

    于 2012-05-02T02:21:20.153 に答える