title: Most robust way to preload image to prevent visible image load? (Without JS)
body: <p>I've just finished creating an image upload feature and am a little disappointed.</p>
  
  <p>Whilst visiting a page that contains one or more photos, I am experiencing: </p>
  
  <ul>
  <li><p>Tedious load time (~0.5 secs).</p></li>
  <li><p>Unaesthetic image loading (You can see the photo load from top to bottom).</p></li>
  </ul>
  
  <p><b>My question is:</b> How can I make sure the entire photo is loaded before presenting it to the user (I am trying to figure out a way to make sure the <code>image</code> is fully loaded before the <code>body</code>) <b>without using Javascript</b>? </p>
  
  <p><b>Note: </b>This question is assuming the photo is being loading from a folder cache in the same directory..</p>