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 infinite scroll plugin - loading and memory issues，与我前几天悬赏的问题相同，所以如果你能解决这个问题，我也会奖励你;）

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++;
    }

});