在jQuery.load()之后重新启动Infinite Ajax Scroll

Question

我正在开发一个想要实现无限滚动的网站。我找到了IAS插件，除了在一个例子中，它工作得很好。如果我使用jQuery.load（）函数将新内容加载到div中，则无限滚动将停止工作。

<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>

以下是IAS插件的文档：http://infiniteajaxscroll.com/docs/overview.html

我发现以下问题似乎很相关，但对我来说似乎没有明确的答案——我很抱歉它们不是链接，Stack Overflow不会让我发布超过2个链接：

1. stackoverflow.com/questions/24419462/

2. stackoverflow.com/questions/25250507/

3. stackoverflow.com/questions/20440493/

4. github.com/webcreate/ininite-ajax-scroll/issues/68

它谈到了破坏函数，但在我试图提出一个似乎毫无作用的解决方案时。我是一个非常业余的程序员，我担心我可能根本不理解正确实现它所需的结构或语法。

我这里有一个测试页面

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

无限滚动加载页面1、2和3成功。如果您单击顶部的链接，使用jQuery.load（）加载页面0，但无限滚动停止工作。它应该向下滚动并再次加载第1、2和3页。

谢谢。

Answer 1

我不能100%确定为什么会发生这种情况，但通过运行代码，我发现在$("#test").load(...之后，ias使用的滚动事件处理程序不再启动。

解决方案应该是在加载完成后重新初始化无限滚动：

$("#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'
  });
});

然而，这将不起作用，因为$.ias()试图通过记忆此方法来实现幂等性，将带有"ias"键的数据分配给全局窗口对象。

看来ias的制造商给了我们一个漏洞来解决这个问题，尽管没有记录在案。您可以将字符串"destroy"传递给$.ias()并删除已存储的数据，这样我们就可以再次调用它并重新安装滚动侦听器。(https://github.com/webcreate/infinite-ajax-scroll/blob/master/src/jquery-ias.js#L553)

以下是您所期望的结果代码：

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();
    });
  });
});