Masonry callback during load

My photography website runs on a masonry layout. Masonry is called in the footer but the images load beforehand, causing it to look fairly messy until the images are completed and masonry is called.

When it was initially developed masonry seemed to run throughout the image loading process, stacking the images up vertically overtop one another, in a solitaire style layout, and when everything was done loading, masonry would then arrange everything using modernizr.

I'm seem to have gotten away from that and now the images are just loading in a messy, unarranged sortve manner, until masonry kicks in and arranges everything.

Here's the script. I was wondering what peoples general approaches are to this sortve thing?

`jQuery(function() {

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

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.item',
    columnWidth: 320
  });
});

$container.infinitescroll({
  navSelector  : '#content .navigation',    // selector for the paged navigation 
  nextSelector : '#content a',  // selector for the NEXT link (to page 2)
  itemSelector : '.item',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://ift.tt/O11sAY'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = jQuery( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);

}); `