title: JQuery Infinite Scroll - "load more" after max page limit reached
body: <p>I am using this infinite scroll plugin:  <a href="https://github.com/paulirish/infinite-scroll" rel="nofollow noreferrer">https://github.com/paulirish/infinite-scroll</a> 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. </p>
  
  <p>I therefore need to stop infinite scrolling when the current page gets to <code>maxPage</code> and allow the user to select a "Load More" button. Hopefully solving the memory issues.</p>
  
  <p>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 <code>maxPage</code> limit is reached.  This is discussed in the link below but I cannot find any further documentation on how to do this exactly.</p>
  
  <p><a href="https://github.com/paulirish/infinite-scroll/issues/300" rel="nofollow noreferrer">https://github.com/paulirish/infinite-scroll/issues/300</a></p>
  
  <p>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?</p>
  
  <pre><code>    // 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);
  
      }
  
  });
  </code></pre>
  
  <p>PS.  This other post belongs to me: <a href="https://stackoverflow.com/questions/21237824/jquery-infinite-scroll-plugin-loading-and-memory-issues">jquery infinite scroll plugin - loading and memory issues</a>, 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 ;)</p>