JQuery Infinite Scroll - 達到最大頁面限制后“加載更多”

Question

我正在使用這個無限滾動插件： https ： //github.com/paulirish/infinite-scroll但由於我有很多頁面而瀏覽器由於內存問題而崩潰，我想實現一個“加載更多”按鈕經過如此多的無限滾動頁面，如谷歌圖片，Twitter和其他應用程序。

因此，當當前頁面達到maxPage並允許用戶選擇“加載更多”按鈕時，我需要停止無限滾動。 希望解決內存問題。

我知道其他插件可以做到這一點，但我沒有更改插件的選項，因此需要能夠在達到maxPage限制時創建自定義函數。 這將在下面的鏈接中討論，但我找不到任何有關如何准確執行此操作的文檔。

https://github.com/paulirish/infinite-scroll/issues/300

我根據文檔嘗試了以下代碼。 加載圖像在每個頁面向末尾滾動時開始，然后在到達頁面5時顯示“加載更多”消息，但警告（“加載更多”）; 在每個頁面上激活，而不是在最后一頁上。 任何人都可以建議我在達到maxpage時創建自定義函數需要做什么？ 或任何其他解決內存問題的工作？

    // Infinite Ajax Scroll configuration
    $container.infinitescroll({
        navSelector: "div.paginate",
        nextSelector: "div.paginate a",
        itemSelector: "div.element",
        maxPage: 5,
        loading: {
          finishedMsg: 'Load More',
          msgText: " ",
          img: 'public/img/ajax-loader.gif',
          finished: function(){
               alert('finished');
          }

        }
    },
    function(newElements) {

        var $newElements = $(newElements).css({opacity: 0});
        //remove the first item
        $newElements.splice(0, 1);

        $container.isotope('appended', $newElements);

    }

});

PS。 這個帖子屬於我： jquery無限滾動插件 - 加載和內存問題 ，它與我幾天前的賞金相同的問題，所以如果你能解決這個問題，我也會獎勵你的賞金;）

Answer 1

查看插件代碼， _showdonemsg這一行：

// user provided callback when done
opts.errorCallback.call($(opts.contentSelector)[0],'done');

似乎表示在達到最大值時調用errorCallback 。 也許您可以使用它來刪除以前的DOM內容，然后繼續滾動。

Answer 2

嘗試更改這樣的代碼，以便每次加載內容時遞增計數器，並在添加更多內容之前檢查計數器是否未達到某個值。

var cLoaded = 0, iMyLoadLimit = 5;

    // Infinite Ajax Scroll configuration
    $container.infinitescroll({
        navSelector: "div.paginate",
        nextSelector: "div.paginate a",
        itemSelector: "div.element",
        maxPage: 5,
        loading: {
          finishedMsg: 'Load More',
          msgText: " ",
          img: 'public/img/ajax-loader.gif',
          finished: function(){
               alert('finished');
          }

        }
    },
    function(newElements) {
        if(cLoaded < iMyLoadLimit){

            var $newElements = $(newElements).css({opacity: 0});
            //remove the first item
            $newElements.splice(0, 1);

            $container.isotope('appended', $newElements);
        }
        cLoaded++;
    }

});