Question

I am using the plugin jquery infinite ajax scroll (ias) for the category result of an mobile shop.

By scrolling or swiping down, the script fires the items of the next pages multible times.

You can test it here: Testpage

If you click the link, please resize your window to a width of 320px, otherwise the css won’t work!!

The script:

$(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

Maintain a flag that tells whether an ajax operation is running or not and only get your items when this flags is on false of course. Would be the fastest solution.

$(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');
        }
    });
}
});