jQuery Masonry infinite scroll won't stop

Question

I am using the jquery masonry infinite scroll script. The pagination next page is loading repeatedly. How can i stop it? When I scroll the page every time the pagination content is appended repeatedly instead of showing a message like "No more content to load".

$(function(){
    // alert($('.pin_item').length);

    var $alpha = $('#alpha');        
    $alpha.masonry({
      itemSelector: '.pin_item',
      columnWidth: 230,
      //isAnimated: true
    });

    $alpha.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.pin_item',     // selector for all items you'll retrieve
      bufferPx     : 50,
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $alpha.masonry( 'appended', $newElems, true ); 
        });
    });
});

Answer 1

I ran into the same problem. It is an issue with your 404 - page not found. Most CMSs will return the last valid paginated content once it runs out of pages. You need to configure your back end to throw a 404 when the 'next page' link is calling a page that doesn't exist.

To confirm that this is your problem try changing the number in your in the url. i.e. if you have 5 pages and the fifth is www.example.com/category/page?id=5, try going to www.example.com/category/page?id=99. It should populate with the same content as your last valid page (in this example, page 5)

Which CMS are you using?

Answer 2

here is a simple example i used in my code.. i set the global variables and based on that i find whether my data is completely loaded or not.. if i am getting data Null it means all the contents are loaded, and i set stop load variable as 1.

suppose DOM is of d form..

<div class="results_list">
  <ul id="divid">
    <li class="results">data...</li>
    <li class="results">data...</li>
  </ul>
</div>
<script>
  $(document).ready(function () {
    window.load_start = 0;
    window.load_stop = 0;
    $(".results_list").scroll(function(){
      if(window.load_stop != 1) {
        if($('.results').hasClass('last')) {
            $('.results').removeClass('last');
        }
        window.load_start += 40; 
        //40.. to load items from 40.. if u hav loaded 40 items a time before..
        $.ajax({
            url:"/url.php",
            data:"action=params+"&lazyload=1&start_load="+window.load_start,
            method:"GET",
            success: function(data) {
                data = $.trim(data);
                //data is in the form of html.. <li class="results">hi load item from - start_load i.e., passed in params by ajax.. above </li>
                if(data == undefined || data == '') {
                    window.load_stop = 1;
                    return false;
                }
                $('#divid').append(data);
            }
        });
      }
    });
  });
</script>
//u can add a condition to send ajax call(load items) only on scrolling down the div.

Answer 3

The Masonry infinite scroll script is loading the pages in the page folder on your root. So, if you want to just load one page more, just delete the other html pages in this folder. Folder Name: pages. Pages' name: 2.html , 3.html, 4.html, ....

So, delete the pages (3.html , 4.html and if you found more just delete them) and just keep the page (2.html).

Enjoy.