Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Keeps on loading posts #449

Closed
louisdalligos opened this Issue Nov 29, 2013 · 1 comment

Comments

2 participants

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!

Owner

desandro commented Nov 29, 2013

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

@desandro desandro closed this Nov 29, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment