title: Placeholder background/image while waiting for full image to load?
body: <p>I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:</p>
  
  <pre><code> --------hr--------
   text
  </code></pre>
  
  <p>Then a few milliseconds later the page jumps to show this:</p>
  
  <pre><code>--------hr--------
  [           ]
  [   image   ]
  [           ]
  text
  </code></pre>
  
  <p>Is there a simple way that I can show a grey background image of <strong>exactly the width and height</strong> that the image will occupy, until the image itself loads?</p>
  
  <p>The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to <code>width: 100%</code> of the containing div. This is the HTML/CSS:</p>
  
  <pre><code>&lt;div class="thumbnail"&gt;
  &lt;img src="myimage.jpeg" /&gt;
  &lt;div class="caption"&gt;caption&lt;/div&gt;
  &lt;/div&gt;
  img { width: 100% } 
  </code></pre>
  
  <p>Here's a JSFiddle to illustrate the basic problem: <a href="http://jsfiddle.net/X8rTB/3/">http://jsfiddle.net/X8rTB/3/</a></p>
  
  <p>I've looked into things like <a href="http://www.appelsiini.net/projects/lazyload">LazyLoad</a>, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images. </p>