Fade in images as they load isotope?

Question

I have isotope portfolio set up on my website (which you can view through my profile) and I want to fade in the images of the isotope gallery as they load as shown here: http://cameronspear.com/demos/jquery-image-fade-in-on-load/ (example).

I tried using imagesLoaded like on this question but it didn't work: Isotope display gallery after images loaded

Also here's a jsfiddle with the method mentioned in the comments (not isotope): http://jsfiddle.net/9z2u2xtk/ (doesn't seem to work good if more than 5 images are to load)

$pfcontainer.imagesLoaded(function(){  
$pfcontainer.fadeIn(1000).isotope({
        getSortData : {
            number : function( $elem ) {
            return parseInt( $elem.find('.number').text(), 10 );
          },
      },
    sortBy : 'number',
        filter: '.designs',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
});

Answer 1

Here is an example (borrowed from an isotope example) using isotope v2 and imagesloaded (not included in isotope 2 but is in v1)

Codepen

$( function() {
// init isotope   
var $container = $('.isotope').imagesLoaded( function() {
$container.isotope({
itemSelector: '.item',
masonry: {
  columnWidth: 110
}
});
// reveal all items after init
var iso = $container.data('isotope');
$container.isotope( 'reveal', iso.items );
});  
});