CODEWITHSUNDEEP
jqueryinfinite-scrollmasonry
twiddly
twiddly

Reputation: 189

waypoints infinite scroll with masonry issue with fast scroll

I have infinite scroll working with masonry, using the code below, but if I scroll quickly then new content is not loaded unless I scroll back up a bit and then down again.

If I scroll slowly, it works fine.

I'm using mostly the defaults for the waypoints infinite scroll shortcut and data is loaded from php via the "More" link. The php file displays 12 items on each call, followed by a new "More" link [unless no more data]. 

<script>
$( document ).ready(function() {

var container = $('.infinite-container');

// initialize Masonry after all images have loaded  
container.imagesLoaded( function() {
    container.masonry({
         itemSelector: '.infinite-item',
         transitionDuration: 0
    });
}); 

    $('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() {
        $(container).masonry('reloadItems');
        $(container).imagesLoaded( function() {
          $(container).masonry('layout');
          });
    }
}); 

}); 
</script>

Upvotes: 0

Views: 501

Answers (1)

twiddly
twiddly

Reputation: 189

While not really a solution to the issue with waypoints, it is a solution.

I switched to using infinite-scroll plugin and it works now. https://github.com/paulirish/infinite-scroll

Required very little change to existing code, wrapped the current waypoints "more" link in page-nav div

Here's new code, in case it helps someone else.

$( document ).ready(function() {

    var $container = $('.infinite-container');
    // initialize Masonry after all images have loaded  
    $container.imagesLoaded( function() {
      $container.masonry({
             itemSelector: '.infinite-item',
             transitionDuration: 0,
             "isFitWidth": true
             //columnWidth: 200
        });
    }); 

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.infinite-item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          msgText: '<em>loading...</em>',
          img: 'images/loading.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 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

});

Upvotes: 0

Related Questions