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

});

JQuery Infinite Scroll - 达到最大页面限制后“加载更多”

2 个答案: