0

我正在一个要实现无限滚动的网站上工作。我找到了 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/25205507/

  3. stackoverflow.com/questions/20404493/

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

它谈到了破坏功能，但在我试图提出一个似乎什么都不做的解决方案时。我非常喜欢程序员，我担心我可能根本不理解正确实现它所必需的结构或语法。

我这里有一个测试页

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

谢谢你。

4

1 回答 1

1

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

    });
  });
});
于 2014-09-17T20:00:20.997 回答