0

我正在使用插件 jquery 无限 ajax 滚动（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');
        }
    });
}

});

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 回答