Question

83

JQuery Infinite Scroll - load more after max page limit reached

rated 0 times [ 84] [ 1] / answers: 1 / hits: 11678 / 11 Years ago, tue, january 28, 2014, 12:00:00

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.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sienad

Add To Favorites

Follow

Total Points: 208

Total Questions: 100

Total Answers: 77

Location: Taiwan

Member since Mon, Sep 6, 2021

3 Years ago

answered 11 Years ago theo · Accepted Answer

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

    }



});