Temporary background image, but a big download?
Is there a way, without javascript, to load a small background image before loading the real image? No javascript because I know how to do it with it.
I cannot check if the following CSS3 will work because it is too fast:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If tinypreload.jpg is only say 20k and the huge .jpg file is 300k - will that do the job? I am assuming that both downloads will start at the same time and not sequentially.
Update
The timing of the results using Firefox profiling has shown that it is not practical / not worth downloading a smaller background first. The main reason is connection time. For tiny shots, it connects at the same time as it downloads content. For images where it's worth it - file size is not recommended for mobile devices.
If you still want to achieve this effect, combine all your "needed" images into 1 file and display them as a cropped background with the correct offset. Load high resolution images via javascript and then refresh the content.
source to share
You can use load order and CSS overrides to achieve this result.
Try loading a small image from your main css file and then place the tag <style></style>
on the bottom of the html page. The inline style will override the main style but will be loaded last due to its position in the code.
The difference will be in milliseconds, so it might be too fast. It is also cracked and will result in invalid but working code. However, it is worth taking a picture.
If you're trying to fix a mobility issue, look at this article in the context of specific images as it might be a more efficient way to go.
This article on CSS3 multiple backgrounds might help as well, as you can use stacking order to achieve the result you are after
It would be helpful to know what problem you are trying to solve outside of the load order, as it is difficult to give advice on this matter.
As I said in my comment, you can use the "net" tab in firebug for firefox (so called timeline in chrome) to see the actual loading order on your page - you can even filter it (in firefox) for CSS only, or images only - this will allow you to test.
source to share