1

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

Community
  • 1
  • 1
LeeTee
  • 6,401
  • 16
  • 79
  • 139
  • +1 .. I need the actual javascript for an infinite scroll tool for Tumblr – HC_ Jan 28 '14 at 19:09
  • You can download it from here: https://github.com/paulirish/infinite-scroll, however the documetation isn't great...hence why Im so stuck :-/ – LeeTee Jan 28 '14 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_ Jan 28 '14 at 19:18
  • no probs, hope you get it working – LeeTee Jan 28 '14 at 20:16

2 Answers2

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.

Owlvark
  • 1,763
  • 17
  • 28
  • Ive tried removing previous pages but it caused problems leaving gaps and causing strange behaviour to the scoll bar so my conclusion is simply to add a more button to all subsequent pages after the maxPage is reached. However, I dont know how to implement this. – LeeTee Jan 28 '14 at 20:59
  • How about showing a "load older pages" message when the max is reached and then loading the whole page with `state.currPage` set to `maxPage`? – Owlvark Jan 28 '14 at 21:13
  • I just want the load more button. I have seen this working on lots of sites and know its implemented on other infinite scroll plugins, so it must be relatively easy to implement – LeeTee Jan 28 '14 at 21:17
  • I don't think this particular plugin can solve your problem without some modification. You appear to want an auto loading system to change to a manual one after maxPage is reached. I also don't see how this would help memory issues. – Owlvark Jan 28 '14 at 21:50
1

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

});
S..
  • 5,511
  • 2
  • 36
  • 43
  • Its part of the infinite scroll initialisation so you can manipulate the returned content before outputting it. So I basically get the new elements and add to the screen using Isotope. In the documentation it shows how this can be done:https://github.com/paulirish/infinite-scroll#loading-json-data and https://github.com/paulirish/infinite-scroll/issues/300 – LeeTee Jan 28 '14 at 18:40
  • Ok, so I don't really need the finished function or the 'maxPage' option setting? I assume you are suggesting I add all the code for the more button etc into the callback function? That makes sense, however the problem would only be half solved as when I add code for the more button to appear, what happens then to help with the memory problem? Would I reset the whole thing? – LeeTee Jan 28 '14 at 20:01
  • If you continually add content to the DOM you will slowly approach memory issues (this varies greatly on the content you're loading of course). How you handle that is a seperate question and a disadvantage of using infinite scroll. You might splice long ago loaded content (so as new content is added, old stuff goes away), keeping the DOM at a rough max. – S.. Jan 28 '14 at 20:09
  • ok, so I was wrong in thinking a load more button would be the solution? After reading the documentation and the discussion I posted links to (https://github.com/paulirish/infinite-scroll/issues/300), it reads as though implementing th 'maxPage' with a laod more button is the answer and my question is asking how to actally implement the solution they discuss... – LeeTee Jan 28 '14 at 20:14
  • The load more button will just make the strain on client incremental and not overload them at once, which generally makes the strain okay and reduces unnecessary bandwidth for the server. I don't understand the problem with what you have not working, you're implementing a pretty textbook example straight from the site. – S.. Jan 28 '14 at 20:16
  • Ive been stuck on this for weeks, integrated different plugins, Im obviously rubbish with JQuery! I have read lots of discussions on this and Ive tried removing old pages but it causes countless issues and so my conclusion is simply to add a more button to all subsequent pages after the maxPage is reached. However, I dont know how to implement this. – LeeTee Jan 28 '14 at 20:26
  • If you had a JSFiddle or something online I could help, but hard otherwise. – S.. Jan 28 '14 at 20:27
  • Ive even posted this query here: https://github.com/paulirish/infinite-scroll/issues/491 but had no response...I have in fact tried doing a JSFiddle but struggled. I'll have another go. many Thanks for your help. – LeeTee Jan 28 '14 at 20:31
  • 1
    I managed to get it working by expanding based on your suggestions. Thanks – LeeTee Jan 30 '14 at 20:41