javascript - JQuery 无限滚动 - 达到最大页面限制后为 "load more"

Question

我正在使用这个无限滚动插件:https://github.com/paulirish/infinite-scroll但由于我有很多页面并且浏览器由于内存问题而崩溃，我想在无限滚动这么多页面(如 Google 图片、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);

    }

});

附言。另一个帖子属于我: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 内容，然后继续滚动。