带同位素的无限 Ajax 滚动答案

【问题标题】：Infinite Ajax Scroll with Isotope带同位素的无限 Ajax 滚动
【发布时间】：2014-05-28 13:20:15
【问题描述】：

无法让 Infinite Ajax Scroll 插件在 Ghost 博客主题上运行。我也在使用 Isotope 插件进行布局。

在监视开发 cmd 时，我看到滚动时正在发出 GET 请求。他们通常会发回 200，但有时会发回 304。

我有一种预感，这个问题与我对 Isotope 的回调有关，尽管我无法让无限滚动以任何方式工作（禁用 Isotope、所有其他插件等）。

代码如下：

  var ias = $.ias({
    container:  $container,
    item:       '.post-excerpt-block-wrap',
    pagination: '.pagination-inner',
    next:       '.older-posts'
  });
  
  $.ias().extension(new IASPagingExtension());
  
  ias.on('rendered', function(items) {
      loadImages();
      checkForFeatured();
      makeFontResponsive();
      addReadMoreLinks();
      fitVidInit();
      var $newElems = $(items); 
      $newElems.imagesLoaded(function(){
        $container.isotope( 'appended', $newElems );
      });
      
  });

当前对 Isotope 的回调导致最初渲染的内容在页面滚动时向下跳转，但没有向页面添加其他元素。

感谢您的帮助/见解。

更新

在阅读 github repo 中的问题线程后，我意识到问题可能与默认使用的 jQuery Ghost 版本有关 - 1.11.0 所以我尝试使用最新的（2.1.1），但没有任何变化。

另外，为了更好地解释当前行为：仅返回 304 GET 响应，并且可以继续滚动。执行此操作时，控制台中的页面会循环显示，具体来说，控制台中显示的内容如下：

GET /page/2/  304  47ms
GET /page/3/  304  55ms
GET /page/4/  304  49ms
GET / 304  61ms
GET /page/2/  304  41ms
etc...

代码（主题）现已上线调试HERE

【问题讨论】：

标签： jquery-ias

【解决方案1】：

来自https://github.com/webcreate/infinite-ajax-scroll/issues/141：

我注意到的一件事是您如何配置容器选择器：

var ias = $.ias({
  container:  $container,
  ...
});

你应该传入一个带有容器选择器的字符串，所以不是$container，而是“.post-excerpt”。希望这会有所帮助。

【讨论】：