Restarting Infinite Ajax Scroll after jQuery .load()

Question

I am working on a site where I want to implement infinite scrolling. I found the IAS plugin, and it works great except in one instance. If I load new content into a div using the jQuery .load() function the infinite scrolling stops working.

<script type="text/javascript">

  $(document).ready(function() {

    var ias = $.ias({
      container:    '#load_here',
      item:       'p',
      pagination: '#nav',
      next:       '#nav a'
    });

    $("#reload").click(function(){
      event.preventDefault();

      $("#test").load( "page0.html #load_here", function() {

        // Reinitialize the infinite scrolling here.

      });
    });
  });

</script>

Here is the documentation for the IAS plugin: http://infiniteajaxscroll.com/docs/overview.html

I found the following questions that seem relevant, but there seem to me to be no clear answers--I apologize they're not links, Stack Overflow won't let me post more than 2 links:

stackoverflow.com/questions/24419462/
stackoverflow.com/questions/25205507/
stackoverflow.com/questions/20404493/
github.com/webcreate/infinite-ajax-scroll/issues/68

It talks about the destroy function, but in my attempts to come up with a solution that seems to do nothing at all. I am very much a hobbyist programmer, I fear I may simply not understand the structure or syntax necessary to implement this correctly.

I have a test page here

http://designforfun.com/flatfile/experiments/scroll/

The infinite scroll loads pages 1, 2, and 3 successfully. If you click the link at the top to load page 0 using a jQuery .load() but then the infinite scrolling stops working. It should scroll down and load page 1, 2, and 3 again.

Thank you.

Lee Byron Lee Byron · Accepted Answer · 2014-09-17T20:00:20

I'm not 100% sure as to WHY this happens, but from running the code, I see that after $("#test").load(..., the scroll event handlers used by ias are no longer firing.

The solution should be to just re-initialize the infinite scroll once the load has completed:

$("#test").load( "page0.html #load_here", function() {

  // Reinitialize the infinite scrolling here.
  var ias = $.ias({
    container:  '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });

});

However, this will not work, because $.ias() attempts to be idempotent by memoizing this method, assigning data with the "ias" key to the global window object.

It appears that the makers of ias have given us a loophole to fix this, though it is not documented. You can pass the string "destroy" to $.ias() and remove the memoized data, allowing us to call it again and reinstall the scroll listeners. (https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js#L553)

Here is the resulting code that does what you expect:

var ias;

function setupIAS() {
  ias && $.ias('destroy');
  ias = $.ias({
    container:    '#load_here',
    item:       'p',
    pagination: '#nav',
    next:       '#nav a'
  });
}

$(document).ready(function() {

  setupIAS();

  $("#reload").click(function(){
    event.preventDefault();

    $("#test").load( "page0.html #load_here", function() {

      // Reinitialize the infinite scrolling here.
      setupIAS();

    });
  });
});

Restarting Infinite Ajax Scroll after jQuery .load()

I have a test page here

1 Answers