title: Hide Image / Masonry Gallery until fully loaded
body: <p>I want to hide the images / whole gallery until all the images are loaded.</p>
  
  <p>I have used some jQuery that works on my initial landing page (where it only has to operate on one image). Once it has to load on multiple images you can always see the images loading the very first time. If you refresh the page after that, the jQuery seems to kick in an work how it is supposed to.</p>
  
  <p>Here is the jQuery I've been using:</p>
  
  <pre><code>$(document).ready(function() {
  $('.library-list img').hide();
  setTimeout(function(){
      $('.library-list img').css("visibility", "visible");
      $('.library-list img').fadeIn('slow');
  },1000);
  </code></pre>
  
  <p>CSS: </p>
  
  <p><code>visibility:hidden</code></p>
  
  <p>This is the initial landing page where the code works: <a href="http://83photography.co.uk" rel="nofollow noreferrer">83photography.co.uk</a></p>
  
  <p>This is the  opening gallery page where the same code doesn't seem to work: <a href="http://www.83photography.co.uk/overview/" rel="nofollow noreferrer">83photography.co.uk/overview</a></p>
  
  <p>If anyone can help so the images in the gallery are hidden until they are fully loaded on that initial load that would be great. Just looks untidy at the moment and want to clear it up</p>