Javascript jQuery无限滚动'；他装火太早了

我试图实现。但是装货太早了。起初，即使我只滚动页面1个像素，它也会触发。然后，在我将页面滚动到底部之前，它仍然会激发

首先，我调用Ajax来填充第一页。然后初始化无限卷轴。如下

$.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' 
                 }
            });
    }
});

为了演示，我简化了我的文件

编辑：。

试试这个

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

});

试试这个

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

});

---

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

该插件的好处在于，您可以定义选项，如“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，以便在每个给定时刻只有一个请求处于活动状态。希望这有帮助。

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

该插件的好处在于，您可以定义选项，如“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，以便在每个给定时刻只有一个请求处于活动状态。希望这有帮助。

在检查源代码后，我发现加载与导航位置有关。然后我意识到我通过设置

display:none隐藏了导航

在我的CSS中添加到它，导致脚本无法正确计算导航位置。删除

后显示：无，问题已修复

感谢所有试图帮助我的人。
检查源代码后，我发现加载与导航位置有关。然后我意识到我通过设置
display:none隐藏了导航
在我的CSS中添加到它，导致脚本无法正确计算导航位置。删除
后显示：无，问题已修复

谢谢所有试图帮助我的人。
像这样试试看

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

});

像这样试试看

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

});

在success中设置一个超时如何。@pkrawat1:不确定这是什么意思，但我尝试放置
setTimeout（function（）{$（'#container'）。append（newElements）}，0）
内部成功，没有任何变化。我是说你可以通过给它1000毫秒左右的延迟来延迟进程。你试过调整bufferPx:40吗？这不是设计的吗？如果滚动条到达底部，则会延迟用户继续操作。我有一个快速的鼠标滚轮，我从来没有被这个用户界面阻挡过。我认为这没问题，那么为什么要减慢预加载？在success中设置一个超时如何。@pkrawat1:不确定这是什么意思，但我尝试放置
setTimeout（function（）{$（'#container'）。append（newElements）}，0）
内部成功，没有任何变化。我是说你可以通过给它1000毫秒左右的延迟来延迟进程。你试过调整bufferPx:40吗？这不是设计的吗？如果滚动条到达底部，则会延迟用户继续操作。我有一个快速的鼠标滚轮，我从来没有被这个用户界面阻挡过。我想没关系，那你为什么要放慢提前装货的速度呢？谢谢。虽然还是一样。另外，我已经将我的演示移到了Plunker上，这样每个人都可以立即看到它的运行。谢谢。虽然还是一样。另外，我已经将我的演示移到了Plunker上，这样每个人都可以立即看到它的运行。