Data is given in cards of 20 pieces, there may be a different number of such pages from 1 to infinity.

Task: loading ajax when scrolling.

$(document).ready(function(){ ajaxLoadScroll (); }); function ajaxLoadScroll(){ var countListing = 1; //так как первая страница уже выведена при подгрузке необходимо получать начиная со второй $(document).on('scroll', function () { var $container = $('.container').height() - 500; if($(this).scrollTop() > $container) { $(document).off('scroll'); countListing++; $.getJSON('/subscriptions/' + countListing, function(data) { var cards = data.cards; if (cards.length !== 0) { } else { } }); }); }); }

The obvious problem is that the second page receives, and the subsequent one does not (for obvious reasons). How to store the state of a variable and run the load script again until cards become an empty array?

  • if cards.length !== 0 you can simply re-hang the handler on the scroll - Grundy
  • @Grundy, that is, a variable with the height of the container to be updated at each load, I understand correctly? - Jarvis
  • I do not understand what you mean - Grundy

0