image load succession w/fancy-schmancy css

help me get my little images loaded first

[mincklerstraat]

I've got a front page that does cool stuff, and admittedly needs a serious diet, but that'll be for later. What it does is displays 6 items in small images, each of which hovers to fill a space in the center of the page with a (different) large image. All css, no js; large image non-hover states are width: 0; height: 0; - an Eric Meyer trick, since display: none; doesn't start loading the image until you hover over it, and that usually means you won't see it anyways.

I know I need to reduce the size of these big images and will do so - but what I'd like is to figure out how to get the page more or less in order so it loads everything else first, and then these six big images, now at about 20K a piece (hope to scale down to about 12K), since the big images are only there for hover states anyways.

I've notices difference in image load sucession in firefox and opera, and guess that which image loads first would probably depend on a lot of different factors, and also isn't likely to be completely cross-browser specific. However, I might still get things so in *most* cases its the big heavies that load last?

I've been thinking of modifying the css so the biggies are display:none in non-hover state, and then at the very end of the HTML (and the very end of the stylesheet) have more <img src's for all these images, but then in a class of height=0; width=0; . Is this likely to make a difference, get the rest of the structure of the front page up before these big mommas start loading up?

[DrDoc]

Yeah, that should work.
Images and such are loaded sequentially, so it's a first come first serve type of deal...

[Rambo Tribble]

While page components are requested sequentially, that doesn't guarantee they will be served in the order they are requested. This is just an FYI; doesn't really have much bearing on this question, which is more about the ordering of requests.

[drbrain]

Another trick is to use background-position windows into a graphic with multiple states. In the normal state, the normal half of the image shows, and in the hovered state, the position of the image shifts, giving you the hovered half of the window.

[mincklerstraat]

thx guys, will try. Yeah, dr brain, iirc David Shea calls that the 'sprite method', very much a fan of it in theory since you can use a single image, it uses no javascript, and good browser agreement would allow for the same selector to be used over multiple images of the same size for the same rollover effect. But I have had big troubles getting it cross-browser. I finally did get it cross-browser, but unfortunately this involves lots of selectors for each image and slightly bloated css. Maybe if I read his article in ala again I could find ways of cleaning up the css.