jQuery无限滚动-“加载更多"达到最大页面数限制后 [英] JQuery Infinite Scroll - "load more" after max page limit reached

问题描述

我正在使用此无限滚动插件: https://github.com/paulirish/infinite-scroll ，但由于我有很多页面，并且由于内存问题导致浏览器崩溃，因此，我想在无数次滚动浏览大量页面(如Google图像，Twitter和其他应用程序)后实现加载更多"按钮.

I am using this infinite scroll plugin: https://github.com/paulirish/infinite-scroll but due to the fact I have lots of pages and the browser crashes due to memory issues, I want to implement a "load more" button after so many pages of infinite scrolling like Google images, Twitter and other apps.

因此，当当前页面移至maxPage时，我需要停止无限滚动，并允许用户选择加载更多"按钮.希望能解决内存问题.

I therefore need to stop infinite scrolling when the current page gets to maxPage and allow the user to select a "Load More" button. Hopefully solving the memory issues.

我知道其他插件也可以这样做，但是我没有更改插件的选项，因此需要能够在达到maxPage限制时创建自定义函数.在下面的链接中对此进行了讨论，但是我找不到有关如何准确执行此操作的任何其他文档.

I know other plugins do this but I do not have the option to change plugins and so need to be able to create a custom function for when the maxPage limit is reached. This is discussed in the link below but I cannot find any further documentation on how to do this exactly.

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

我已经根据文档尝试了以下代码.当每页滚动到末尾时，加载图像开始，然后在到达第5页时显示加载更多"消息，但提示(加载更多")；在每个页面上激活，而不是在最后一页上激活.有人可以建议我在达到maxpage时需要做些什么来创建自定义函数吗?或其他解决内存问题的方法?

I have tried the below code based on the documentation. The loading image starts as each page scrolls towards the end and then shows the 'load more' message when page 5 is reached but the alert('load more'); is activated on every page, not ont he last page. can anyone suggest what I need to do to create a custom function when the maxpage is reached? or any other work around for the memory problem?

    // 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无限滚动插件-加载和内存问题，这与我几天前悬赏金的问题相同，因此，如果您能解决此问题，我也会奖励您;)

PS. This other post belongs to me: jquery infinite scroll plugin - loading and memory issues, its the same issue which I put a bounty on days ago, so if you can resolve this I will also reward you with the bounty ;)

推荐答案

尝试像这样更改代码，以便每次加载内容时都增加一个计数器，并在添加更多计数器之前检查计数器未达到某个值.内容.

Try changing your code like this, so that you increment a counter each time you load content, and check that counter hasn't reached a certain value before adding more content.

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无限滚动-“加载更多"达到最大页面数限制后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！