jQuery 无限滚动的加载过早触发

jQuery Infinite Scroll's loading fires too early

本文关键字：加载 无限 滚动 jQuery      更新时间：2023-09-26

我试图实现jQuery Infinite Scroll。但是装载太早了。起初，即使我只滚动页面 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' 
                 }
            });
    }
});

出于演示目的，我在这里简化了我的文件。

编辑：Plunker上的演示。

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

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

像这样试试 

$(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() {
  $.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，以便每个给定时刻只有一个请求处于活动状态。希望这有帮助。

相关文章：