Isotope Masonry / Glitch while appending new items with ajax load more

Question

maybe somebody has a hint for my problem. I have the same problem as described here on GitHub, but the provided solution is not working in my case

I have a isotope masonry grid in combination with the infiniteajaxscroll plugin and the imagesloaded plugin.

It is working fine except one issue: After clicking the "load more" button the new items appear on top of the page (overlapping other stuff) before they are shortly after moving properly into the grid. Hiding them until everything is loaded seems not to work in my code.

Here is my code snippet, I would appreciate any help. A quick fix I found would be to set the item on opacity:0 before rendered and on opacity:1 after rendered in my function. But that is also creating another glitch, making the space where the items appear flicker.

$(function(){
var $container = $('.ajax-grid');
$container.isotope({
  itemSelector : '.grid-item'
});

$container.imagesLoaded().progress( function() {
$container.isotope('layout');
  });

    var ias = $.ias({
      container: ".ajax-grid",
      item: ".grid-item",
      pagination: ".ajax-pgn",
      next: ".pagination .next",
      delay: 1200
    });

    ias.on('render', function(items) {
    });

    ias.on('rendered', function(items) {
      var $newElems = $(items).hide();
      $newElems.imagesLoaded(function(){
      $newElems.fadeIn();
      $container.isotope( 'appended', $newElems );
      });
    });

    ias.extension(new IASTriggerExtension({html: 'some html',}));
    ias.extension(new IASSpinnerExtension({html: 'some html', }));
    ias.extension(new IASNoneLeftExtension({html: 'some html',}));
  });

The issue appears only on the first click/loading. Thanks for your help!

Answer 1

You may need to layout the items after they are appended. Try the following code:

ias.on('rendered', function(items) {
  var $newElems = $(items).hide();
  $newElems.imagesLoaded(function(){
  $newElems.fadeIn();
  $container.isotope( 'appended', $newElems );
 $container.isotope('layout');
  });
});

Answer 2

Maybe not ideal, but this solved it for now. I guess hidden elements can`t be layouted.

    ias.on('render', function(items) {
         $(items).css({ opacity: 0 });
    });

    ias.on('rendered', function(items) {
      var $newElems = $(items);
      $newElems.imagesLoaded(function(){
      $newElems.css({ opacity: 1 });
      $container.isotope( 'appended', $newElems );
      });
    });