title: CSS + Show Animated GIF while <img> Loads
body: <p>I want to show an Animated GIF while images loads and I want to do this using CSS. (eg: without JS if possible).</p>
  
  <pre><code> &lt;img src="images/users/girl1.png" class="thumbnailPreLoader memberImage"/&gt;
  
  
   .thumbnailPreLoader {
       background: url('/images/image-preloader.gif') no-repeat scroll center center #F9F9F9;
       height: 101px;
       width: 101px;
       position: relative;
   }
  
  
   div#preferredMembers img.memberImage {
       border: 1px solid #808080;
       padding: 3px;
   }
  </code></pre>
  
  <p>Above is what I'm currently working with and you can see this at www.datingjapan.co (set of 5 thumbnail images). </p>
  
  <p>I'm currently finding I just don't see the GIF. </p>
  
  <p>If I go into chrome developer mode and change the path of the img I can see the GIF then so I know the path etc are correct.</p>
  
  <p>Is this possible? Is there a trick I'm missing? any help would be greatly appreciated. </p>
  
  <p>Note: I know how to do this with jquery .load() but it would suit me much better to just attach a CSS class.</p>
  
  <p>thx</p>