title: Display 'loading' until all images have loaded and jquery Masonry triggers
body: <p>I am using the <a href="http://masonry.desandro.com/demos/images.html">jquery Masonry plugin</a> and looking to hide all content until after the plugin triggers. Masonry  by default loads all images before it triggers. I want to display a 'loading' div until the plugin has triggered. I have implemented a page that checks the resolution is above 1024px, then displays a 'loading' div as the page loads but right now page content appears before the plugin triggers. </p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function() {
      $('#content').show();
      $('#loading').hide();
  });
  
  $(function(){
  
  var $container = $('#container');
  var width = $(window).width(); 
  var height = $(window).height(); 
  
  if ((width &gt; 1024  )) {
  
  $container.imagesLoaded( function(){
    $container.masonry({
      itemSelector : '.box',
      columnWidth: 120,
        });
      });
  
      }
      else {
      //load the css styles for screen res below 1024
      }
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jesseyuen.com/loz">See working example here.</a></p>
  
  <p>As you can see there is a delay between the content appearing and the plugin triggering. Hoping someone can help me delay the content appearing unit after trigger? </p>
  
  <p>Cheers - Jesse</p>