Databases
StackOverflow2013
Postsdbo
POWhat Could be Causing Infinite Scroll to Prematurely Load?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat Could be Causing Infinite Scroll to Prematurely Load?
    text
    copied!<p>I'm using the class Infinite-Scroll plugin by Paul Irish. My basic HTML structure is like this: </p> <pre><code>&lt;div class="container"&gt; &lt;div class="track"&gt; a bunch of other html &lt;/div&gt; &lt;div class="track"&gt; a bunch of other html &lt;/div&gt; </code></pre> <p>I have like 100 tracks, each paginated in groups of 10. The calls to the pagination work fine, so I won't include that code. Here's my infinite scroll jQuery code: </p> <pre><code>jQuery(function($) { $('.charts-container').infinitescroll({ navSelector: '.navigation', nextSelector: '.next-page', itemSelector: '.track', loading: { img: "&lt;?php echo get_template_directory_uri() . '/images/ajax-loader-spinner.gif'; ?&gt;", msgText: '', finishedMsg: '' } }, function(arrayOfNewElems) { // bind newly generated audio elements -- media events don't bubble $('audio').on('ended', function(e) { $(e.currentTarget).prev('.play-button').find('.pause-img').addClass('js-hidden'); $(e.currentTarget).prev('.play-button').find('.play-img').removeClass('js-hidden'); }); }); </code></pre> <p>This works. It gets the proper data and populates the page properly, executing the callback without a hitch. The problem is that the loading begins right when I start scrolling on the page, so before I even get remotely close to the bottom of the page, a good 20 tracks have loaded, and the rest quickly load thereafter. </p> <p>It's as if something else is triggering the infinite scroll, because it's certainly not my position on the screen. The bottom of the container is not in sight when the page loads. What could be triggering this? It's not the callback, because I only recently added that, and I was running into these issues before. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload