Temporary background image while the big one is loading?

Question

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.

I can't test if the following CSS3 would work because it works too quick:

body { 
  background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}

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.

Update

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.

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.

Answer 1

You could exploit css load order and overrides to achieve this result.

Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.

The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.

If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.

This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after

It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.

As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.