Requests keep happening before new items are appended

[leanazulyoro]

With the append option set to false, so I can use JSON as response, what happens is: if I have a tall enough element below the scroll element (e.g.: a footer), so that it's actually taller than the current window viewport, what will happen is that the scrollThreshold will always be reached, and continue to trigger new requests before the loading and appending of new items are finished.

Since the append is made manually in the case of loading a JSON, and since it doesn't trigger the append event, there is no way of determining if the appending actually finished. If that was the case, I could set the loadOnScroll option to false on the load event, and set it back to true on the append event to workaround the issue, like so:

$container.on( 'load.infiniteScroll', function( event, response ) {
  // parse response into JSON data
  var data = JSON.parse( response );
  // compile data into HTML
  var itemsHTML = data.map(function(item) { return renderItemAsHtml(item)}).join('');
  // convert HTML string into elements
  var $items =  $( itemsHTML );
  // append item elements
  $container.infiniteScroll( 'appendItems', $items );
  // pause infinite scroll
  $container.infiniteScroll( 'option', { loadOnScroll: false });
});

$container.on( 'append.infiniteScroll', function( ) {
  // resume infinite scroll
  $container.infiniteScroll( 'option', { loadOnScroll: true });
});

This does not work since the append event is never triggered

Here's a modified version of the "Loading JSON" codepen, that adds a tall element at the bottom of the page: https://codepen.io/anon/pen/ZZedBZ?editors=1111 If you scroll all the way to the bottom, it will stick there and you will see in the console that requests keep being triggered.

[desandro]

Thanks for reporting this issue. This is indeed a bug. I'll have to take a look.

[josemanuelguzman]

I have the same issue 😢

[adamcmoore]

I had a similar issue today, but with append set as a path.

My issue was that the pagination links were in the same container as the results. So my initial markup looked like:

<div class="results">
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>

    <div class="pagination">...</div>
</div>

The first request worked correctly, but subsequent requests would hang at the bottom before the results were appended and make the next request instantly, loading all pages without the user scrolling. The markup, after the first request looked like below:

<div class="results">
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>

    <div class="pagination">...</div>

    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
    <div class="result">...</div>
</div>

The fix was easy enough - just move the pagination outside of the results element. Hope this saves someone else a headache!