jquery infinite scroll plugin - loading and memory issues

Question

I am using infinate scroll plugin (by Paul Irish). I want to use custom functions when the next page is loading and when the maxPage is reached.

I have tried the below based on the documentation, however this starts the loading function but doesn't ever call the finished function. Its not calling the next page either when I look in the console. What am I missing?

    // Infinite Ajax Scroll configuration
    $container.infinitescroll({
        navSelector: "div.paginate",
        nextSelector: "div.paginate a",
        itemSelector: "div.element",
        maxPage: 5,
        loading: {
            start: function(){
                  alert('started');
            },
            finished: function(){
                  alert('finsihed loading');
            }
        }
    },
    function(newElements) {

        var $newElements = $(newElements).css({opacity: 0});
        //remove the first item
        $newElements.splice(0, 1);

            $container.isotope('appended', $newElements);

        }

    });
});

The scrolling could go on for pages and pages until the browser crashes due to memory issues, 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 memory issues.

This is discussed in the link below but I cannot find any further documentation on how to do this exactly and cann't even get the above sample to work.

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

Answer 1

First, ensure it works will the minimum options (plus console debug messages):

$container.infinitescroll({
    navSelector: "div.paginate",
    nextSelector: "div.paginate a",
    itemSelector: "div.element",
    debug: true
});

If it does, add in options until it breaks.

I recommend debugging the start/finished functions in the console, like this:

    loading: {
        start: function(){
              console.log('started');
        },
        finished: function(){
              console.log('finsihed loading');
        }
    }

Consider adding the errorCallback option to debug ajax issues.