0

モバイルショップのカテゴリ結果にプラグインjqueryinfiniteajax scroll(ias)を使用しています。

スクリプトは、スクロールまたは下にスワイプすることで、次のページのアイテムを複数回起動します。

ここでテストできます:テストページ

リンクをクリックした場合は、ウィンドウのサイズを320pxの幅に変更してください。そうしないと、cssが機能しません。

スクリプト:

$(document).ready(function() {
document.onscroll = function() {
    jQuery.ias({
        container : 'div.articlelist',
        item: '.row',
        pagination: '.pagination',
        next: '.pagination a:first',
        loader: '<img src="/layout/mobil/img/ajax-loader.gif"><br>Artikel werden geladen...',
        history: false,
        onLoadItems: function(items) {
        $(items, '.bubbles').find('span:eq(0)').css('margin-right','107px');
        $(items, '.bubbles').find('span:eq(1)').css('margin-right','51px');
        $(items, '.bubbles').find('span:eq(2)').css('margin-right','102px');
        }
    });
}

});

4

1 に答える 1

3

ajax操作が実行されているかどうかを示すフラグを維持し、もちろんこのフラグがfalseの場合にのみアイテムを取得します。最速のソリューションになります。

$(document).ready(function() {
var ajaxRunning = false;

$("body").ajaxStart(function()
{
ajaxRunning = true;
}).ajaxStop(function()
{
ajaxRunning = false;
});

    document.onscroll = function() {
if(ajaxRunning)
{
return;
}

    jQuery.ias({
        container : 'div.articlelist',
        item: '.row',
        pagination: '.pagination',
        next: '.pagination a:first',
        loader: '<img src="/layout/mobil/img/ajax-loader.gif"><br>Artikel werden geladen...',
        history: false,
        onLoadItems: function(items) {
        $(items, '.bubbles').find('span:eq(0)').css('margin-right','107px');
        $(items, '.bubbles').find('span:eq(1)').css('margin-right','51px');
        $(items, '.bubbles').find('span:eq(2)').css('margin-right','102px');
        }
    });
}
});
于 2012-10-19T13:54:33.593 に答える