Infinite scroll loading too quickly

Question

Lots of separate issues here that I want to figure out so apologies for lots of recent posts ;)

I have infinite scroll working on my site (other issues we won't mention) yet the whole thing seems to fire too quickly, especially before the pagination exists.

This is what I have:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.infinitescroll.min.js"></script>
<script>
  $(function(){

var $container = $('.rest-of-content');

  $container.infinitescroll({
    navSelector  : '.wp-paginate',    // selector for the paged navigation 
    nextSelector : '.wp-paginate li a',  // selector for the NEXT link (to page 2)
    itemSelector : '.single-fg-post',     // selector for all items you'll retrieve
    bufferPX: 20,
    loading: {
      msgText: 'Fetching more gold...',
      finishedMsg: 'Damn! No more gold!',
      img: '<?php bloginfo('template_directory'); ?>/images/ajax-loader-black.gif'
    }
});

  });
</script>

Yet, if you look at the way it works: http://goo.gl/L9p00 - if you scroll down a little, you can see the scrollbar slider shorten as it loads the content before I have even reached it.

Answer 1

There is nothing wrong with this. It's working exactly as intended. You want the page to render before hitting the bottom because you don't want the user to have to wait. Your servers can take the hit. Your users can't stand the wait.

Take a look at Pinterest to see the exact same thing in action.