Question

我使用插件jquery无限ajax scroll（ias）作为移动商店的类别结果。

通过向下滚动或向下滑动，脚本会多次触发下一页的项目。

您可以在此处进行测试：Testpage

如果您点击该链接，请将您的窗口调整为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');
        }
    });
}

}）;

Answer 1

维护一个标志，告诉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');
        }
    });
}
});

jquery无限ajax滚动多次触发项目

1 个答案: