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

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

感谢所有试图帮助我的人。

Answer 2

试试这个

$(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 3

当我在寻找无限滚动插件时遇到了同样的问题，所以我最终使用了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 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的加载太早了

4 个答案: