Question

我正在努力让infinitescroll与isotope一起工作。我已经浏览过文档和页面源但无法找到问题。我确实看到了最初在页面上的第一个项目，但在滚动到页面的最底部时，没有任何反应。

我的HTML包含指向下一页（分页博客页面）的链接：

<nav id='page-nav'>
  <a href='/blog/full-blog?page=2'></a>
</nav>

JavaScript：

  $("#container").isotope({
    itemSelector: '.item',
    isAnimated: true
  });

  $("#container").infinitescroll({
    navSelector: '#page-nav',    // selector for the paged navigation 
    nextSelector: '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector: '.item',     // selector for all items you'll retrieve
    debug: true,
    },
    function( newElements ) {
      console.log(newElements);
      $("#container").isotope( 'appended', $( newElements ) ); 
    }
  );

查看我的页面时，控制台会说：

["determinePath", Array[2]]
 jquery.infinitescroll.min.js:1
["Binding", "bind"] jquery.infinitescroll.min.js:1
["math:", 497, 451] jquery.infinitescroll.min.js:1
["math:", 0, 451] jquery.infinitescroll.min.js:1
["heading into ajax", "/blog/full-blog?page=2"] jquery.infinitescroll.min.js:1
Using HTML via .load() method jquery.infinitescroll.min.js:1
XHR finished loading: "http://localhost:4567/blog/full-blog?page=2". jquery.js:8240
["Error", "end"] jquery.infinitescroll.min.js:1
["Binding", "unbind"]

任何人都能解释一下最后两行是什么意思吗？显然有一个错误，但最终意味着什么？是否没有要加载的页面？在我的示例中，我有3个页面，需要加载更多项目。 Unbind，滚动事件解除绑定吗？找不到有关错误日志的任何文档/信息......

Answer 1

行'进入ajax'意味着在到达底部时触发了ajax请求。

'XHR Finished Loading'表示ajax请求成功。

第二行中的

'错误'表示ajax请求没有返回数据。确保您请求的页面不返回空结果。要检查，请在浏览器中打开“/ blog / full-blog？page = 2”。

Infinitescroll插件不会与Isotope一起触发

1 个答案: