jQuery Infinite Scroll 的加载触发太早

Question

我尝试实现 jQuery Infinite Scroll。但是加载太早了。起初，即使我只将页面滚动 1 个像素，它也会触发。然后在我将页面滚动到底部之前它仍然会触发。

首先，我调用 Ajax 来填写第一页。然后我初始化 Infinite Scroll。如下

$.ajax({
    url      : 'data/page1.html',
    cache    :  true,
    dataType : 'html',
    success  :  function(newElements) {
        $('#container')
            .append(newElements)
            .infinitescroll({
                 // -- selector for: --
                 navSelector  : '#pagenav', // the paged navigation 
                 nextSelector : '#pagenav', // the NEXT link (to page 2)
                 itemSelector : '.item',    // all items you'll retrieve
                 // --
                 loading      :  { 
                     finishedMsg: 'No more items to load', 
                     img: 'images/ajax-loading.gif' 
                 }
            });
    }
});

~~出于演示目的，我在 here 简化了我的文件。~~

编辑：Demonstration on Plunker.

Answer 1

试试这个

$(document).ready(function() {
  $.ajax({
    url: "data/page1.html",
    cache: true,
    dataType: "html",
    success: function(newElements) {
      setTimeout((function() {
        $("#container").append(newElements).infinitescroll({
          navSelector: "#pagenav",
          nextSelector: "#pagenav",
          itemSelector: ".item",
          loading: {
            finishedMsg: "No more items to load",
            img: "images/ajax-loading.gif"
          }
        });
      }), 5000);
    }
  });

});

Answer 2

我在寻找无限滚动插件时遇到了同样的问题，所以我最终使用了Endless Scroll。

这个插件的好处是可以定义选项，比如'bottomPixels'，如下例所示：

$(document).endlessScroll({
    bottomPixels: 300,
    fireDelay: 200,
    callback: function() {
        if ($('#table').length > 0 && !loadedAllEntries && !loadPending) {
            loadEntries($('#table tbody tr').size());
        }
    },
    ceaseFire: function() {
        if (loadedAllEntries) 
            return 1;

        if ($('#table').length === 0)
            return 2;
    }
});

我在每个请求的开头将 loadPending 设置为 true，以便在每个给定时刻只有一个请求处于活动状态。希望这有帮助。

Answer 3

查看源码后发现on line 423加载与导航的位置有关。然后我意识到我通过在 CSS 中设置 display: none; 来隐藏导航，这导致脚本无法正确计算导航的位置。删除display: none;后，问题已解决。

感谢所有帮助过我的人。

Answer 4

像这样尝试

$(document).ready(function() {

  $('#container').infinitescroll({
    dataType: 'html',
    appendCallback: false,
    navSelector: '#pagenav', // selector for the paged navigation 
    nextSelector: '#pagenav', // selector for the NEXT link (to page 2)
    itemSelector: '.item',
    pixelsFromNavToBottom: 50
  });

});

Plunker

jQuery Infinite Scroll 的加载触发太早

jQuery Infinite Scroll's loading fires too early

javascript

jquery

infinite-scroll