jquery 무한 아약스 스크롤 항목 multible 번

Question

모바일 샵의 카테고리 결과에 대한 플러그인 jquery infinite ajax scroll (ias)을 사용하고 있습니다.

스크롤 또는 아래로 스 와이프하여 스크립트는 다음 페이지 항목을 여러 번 실행합니다.

당신은 여기를 테스트 할 수 있습니다 : 당신이 링크를 클릭하면 Testpage

, 그렇지 않으면 CSS가 작동하지 않습니다, 320 ~의 폭에 창 크기를 조정하시기 바랍니다!

스크립트 :

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

아약스 작업이 실행 중인지 여부를 알려주는 플래그를 유지하고이 플래그가 물론 거짓 일 때 항목 만 가져옵니다. 가장 빠른 솔루션이 될 것입니다.

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