Keeps on loading posts

[ghost]

Hi,

I've got a site here: http://chimera.cheriomedia.com/

Keeps on loading the last remaining posts in a loop. I'm using a trigger/append to load new posts. Here's my code:

var $timelineContainer = $('.timeline-container');
if ($timelineContainer.length > 0 ) {
    $timelineContainer.imagesLoaded(function() {
      $('#content').css('opacity','1');
            $timelineContainer.masonry({
                itemSelector: '.post',
                hiddenStyle: { opacity: 0 },
                visibleStyle: { opacity: 1 },
                transitionDuration: '0.5s'
            });

      $timelineContainer.masonry('on', 'layoutComplete', function() {
        $timelineContainer.addClass('transition');
      });
    });
  }

var $loadMorePosts = $('.js-load-more-posts');
  var $spinner = $('<span class="ajax-spinner"></span>');
  var archivePosts = $('.older-posts').attr('href');

  $loadMorePosts.on('click', function(e) {
    e.preventDefault();

    // If there are posts to get
    if (archivePosts !== undefined) {
      $loadMorePosts.html($spinner);

      $.get(archivePosts, function(result) {
        var $html = $(result);
        var $newContent = $('.js-timeline-container', $html).contents();

        $timelineContainer.append($newContent);
        $(".post").fitVids();

        $timelineContainer.imagesLoaded(function() {
          $timelineContainer.masonry('appended', $newContent);
        });

        // Set up the load more button after the layouts complete
        $timelineContainer.masonry('on', 'layoutComplete', function() {
          // Get the url for more posts
          archivePosts = $('.older-posts', $html).attr('href');

          // Inform the user if there are no more posts
          if (archivePosts === undefined) {
            $loadMorePosts.text('No More Posts');
          } else {
            $loadMorePosts.text('Load More');
          }
        });
      });
    }
  });

Any help would be appreciated! Thanks!

[desandro]

Sounds like this is related to how you are loading more content, not necessarily how Masonry is being used. I would disable use of Masonry and focus just on getting the 'load more' functionality resolved.

Also, this looks problematic:

$timelineContainer.masonry('on', 'layoutComplete', function() {

I would add return true in that function so you're only binding the event once per each load