What Could be Causing Infinite Scroll to Prematurely Load?

Question

I'm using the class Infinite-Scroll plugin by Paul Irish. My basic HTML structure is like this:

<div class="container">
<div class="track">
a bunch of other html
</div>
<div class="track">
a bunch of other html
</div>

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:

jQuery(function($) {
    $('.charts-container').infinitescroll({
        navSelector: '.navigation',
        nextSelector: '.next-page',
        itemSelector: '.track',
        loading: { img: "<?php echo get_template_directory_uri() . '/images/ajax-loader-spinner.gif'; ?>",
                   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');
          });
    });

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.

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.

Answer 1

You could hack it a little and try this:

$(window).scroll(function() {
    if($(window).offset().bottom < 200) {
        $(".charts-container").DoSomething//ETC...
    }
});

This would fire the function only when viewport is 200px from the bottom.