I am using this infinite scroll plugin: 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.

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.

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.

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. 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 ;)

I am using this infinite scroll plugin: https://github./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.

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.

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./paulirish/infinite-scroll/issues/300

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. 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 ;)

• javascript
• jquery
• infinite-scroll

• +1 .. I need the actual javascript for an infinite scroll tool for Tumblr – HC_ Commented Jan 28, 2014 at 19:09
• You can download it from here: github./paulirish/infinite-scroll, however the documetation isn't great...hence why Im so stuck :-/ – LeeTee Commented Jan 28, 2014 at 19:15
• thanks so much! I've never been able to find raw JS to embed -- just links to other peoples' sites that invariably die and break my page at some random point >_> Best of luck to you. – HC_ Commented Jan 28, 2014 at 19:18
• no probs, hope you get it working – LeeTee Commented Jan 28, 2014 at 20:16

2 Answers 2

Looking at the plugin code, this line in _showdonemsg:

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

seems to indicate errorCallback is called when the max is reached. Perhaps you could use this to remove previous DOM content and then continue scrolling.

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

});