Isotope display gallery after images loaded

Question

I tried to search and see if there was anything listed under this but I didn't see anything. I have a gallery thats laid out using Isotope and it works fine, but while the page loads, the images in the gallery are displayed down the middle of the page and then once they are loaded jump to their respective positions.

I'm trying to figure out a way to set the container to hide until the images are in their spots and then fade them in with $container.fadeIn(1000);

I just don't know how to trigger that function after they are loaded. I've tried using Document.ready a few places and can't seem to get it react right.

<script>
$(function(){

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

  $container.imagesLoaded( function(){
    $container.isotope({
        layoutMode : 'fitRows',
        itemSelector : '.photo'
    }); 

  });

$container.fadeIn(1000);

});

This kind of works but it isn't really listening for the images to be fully loaded yet.

Answer 1

The plugin's author explains it on GitHub. It's pretty simple actually. Just add the fadeIn right before starting the isotope gallery.

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

$container.imagesLoaded( function(){
  $container.fadeIn(1000).isotope({
    layoutMode : 'fitRows',
    itemSelector : '.photo'
  });
});