jQuery Infinite Scroll的加載觸發得太早

Question

我試圖實現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上的演示 。

Answer 1

在檢查了源代碼之后，我在第423行發現加載與導航位置有關。 然后我意識到我通過設置display: none;隱藏導航display: none; 在我的CSS中導致腳本無法正確計算導航位置。 刪除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