title: Temporary background image while the big one is loading?
body: <p>Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.</p>
  
  <p>I can't test if the following CSS3 would work because it works too quick:</p>
  
  <pre><code>body { 
    background-image:url('hugefile.jpg'), url('tinypreload.jpg');
  }
  </code></pre>
  
  <p>If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive. </p>
  
  <h2>Update</h2>
  
  <p>Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.</p>
  
  <p>If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.</p>