Is there way to control the order of the images that are downloaded from the server. I have some images in a CSS file and I would like those to be downloaded first but I'm not sure if it's possible.
It won't change the download order, but CSS Sprites are a great way to eliminate weird interface flickers as the down-state version of the image loads in. A sprite is a single file that is used in conjunction with image replacement. You lay out all your interface bits in all their states in a grid and then use background-positioning to crop out all but the appropriate piece in your stylesheet.
It can have a positive impact on page load speed when there are a lot of interface graphics since it's one server connection instead of 30+ individual files. But mostly it just smoothes out the presentation of your site.
A couple possibilities:
- Use CSS and maybe something like absolute position on elements where the CSS is attached to move them higher up on the page. I believe most browsers load based on the order they find the elements (not the order in the CSS).
$('<img />').attr('src', '/path/to/image.jpg');in jQuery. Most browsers (I'm not sure which ones will or won't) will load the image, but not display it. I use this method for preloading image rollovers when I'm not using a background image.