Buggy endless scrolling

Question

Using this thread as an example i've managed to get endless scrolling to work but not very well. Scrolling isn't smooth and displays the newly-loaded posts more than once. Here is all my code:

Posts controller:

@posts = Post.all.paginate(:page => params[:page], :per_page => 5)
respond_to do |format|
 format.html
 format.js
end

posts.js.coffee:

$ ->
$('#pins').imagesLoaded ->
 $('#pins').masonry
   itemSelector: '.box'
   isResizable: true

if $('.pagination').length
    $(window).scroll ->
        url = $('.pagination .next_page a').attr('href')
        if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
            # What to do at the bottom of the page
            $('.pagination').text("Loading more posts...")
            $.getScript(url)
        $(window).scroll()

posts/index.js.erb:

 $boxes = $('<%= j render(@posts) %>')

$('#pins').append( $boxes ).imagesLoaded( function(){
$('#pins').masonry( 'reload');
});
<% if @posts.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
<% else %>
$('.pagination').remove();
<% end %>

I then wrapped the view with this:

<div class="post-box pins-masonry" data-no-turbolink>

score 0 · Answer 1 · answered Jan 01 '14 at 15:44

Add this to your gem file

gem "jquery-turbolinks", "~> 2.0.1"
    gem 'masonry-rails'

Run bundle:install

in your application js file do this

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks

//= require masonry/jquery.masonry
//= require masonry/jquery.event-drag
//= require masonry/jquery.imagesloaded.min
//= require masonry/jquery.infinitescroll.min
//= require masonry/modernizr-transitions
//= require masonry/box-maker

$(function(){

    var $container = $('#pins');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.box'
        });
    });

    // get new #page-nav
    var nexPageNav = $(this).find('#page-nav');

    // substitute current #page-nav with new #page-nav from page loaded
    $('#page-nav').replaceWith(nexPageNav);

    $container.infinitescroll({
            navSelector  : '.pagination',    // selector for the paged navigation
            nextSelector : '.pagination .next_page',  // selector for the NEXT link (to page 2)
            itemSelector : '.item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'No more wedding dresses 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 });
                $container.masonry( 'appended', $newElems, true );
            });
        }
    );
});

your index.js

var $boxes = $("<%= j render @posts %>");

$boxes.imagesLoaded(function() {
  $('#pins').append( $boxes ).masonry( 'appended', $boxes );
});

<% if @posts.next_page %>
$('.pager').prepend('<%= j(render "page_nav", posts: @posts)%>');
<% else %>
$('.pager').hide();
<% end %>

in _page_nav partial i have

<%= will_paginate posts %>

in my index.html

i have

<div id="pins" class="transitions-enabled infinite-scroll clearfix">
  <%= render @posts %>
</div>

  <div class="pager">
    <%= render "page_nav", posts: @posts %>
  </div>

Pls ensure that you move your javascript include tag to the head to enable jquery-thurbolinks work well

Buggy endless scrolling

1 Answers1