CODEWITHSUNDEEP
jqueryajaxinfinite-scroll
Sebastian Rush
Sebastian Rush

Reputation: 538

jquery infinite ajax scroll fires items multible times

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

});

Upvotes: 0

Views: 1292

Answers (1)

user659025
user659025

Reputation:

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

Upvotes: 3

Related Questions