css images preloading

[w2mt]

i'm making a site lots of images and animations and it doesnt run smoothly at all with slower connection so i was wondering maybe i can make the all the images pre-load before the site is displayed. but how can i make that in css?
or would javascript be better idea?
also i am planning to make a flash into to the site so my idea is to make the site images preload while intro page is displaying intro video. how can i make such thing happen?
all help's appreciated
and thanks in advance

[andersmoen]

I think you need to use JavaScript for this. I don't know how though.

[w2mt]

thanks, but what what if javascript is not availabe in browser? i want it to work regardless

[andersmoen]

Well..you could write

<noscript>Please enable JavaScript</noscript>

[w2mt]

ok but where would i need to write that code?
although since the site is made in css, i'd like this to be in css too so im a bit iffy about javascript lol...
also if find a way to do this, do i have to specify each image that should preload separately? cos i got so many of them

[Ryan Fait]

You really don't have to worry about JavaScript being disabled unless your site is specifically for less computer illiterate people. Anyway, you could do this with CSS by doing something like:

.image1 {
    position: absolute;
    left: -5000px;
    background: url(image1.jpg);
}

<div class="image1"></div>

[mburt]

This type of preloading is pointless: it will only further slow down download time for the client. The CSS cache is different from the "img" tag cache. If you change the background on an img tag, it will change when you refresh the page, but if you use this type of CSS to preload the image, it will only load what was saved in the cache, thus having to load three images (or more) for one.
Unless you have a faster way of loading images, preloading itself is pointless, the image has to be loaded one way or another.

[Ryan Fait]

Yeah, I agree to an extent. It's nice to have smooth rollovers, however. You can use the background switch method a lot of times, which is nice.

http://www.newguyinennis.com/samples/css_hover/

[mburt]

If it wasn't for Internet Explorer, the pseudo class hover would be very efficient. The fact that you have to use JavaScript for image hovers is kind of band, considering some people disable JavaScript. CSS is always better, if you can do it.

[Ryan Fait]

Yeah. That example does work in IE, though. As long as you use the hover pseudo selector on an anchor it'll always work. There are some nice htc's that will allow the :hover element to be used on things other than anchors if JavaScript is enabled. It's cleaner than a straight up JavaScript file anyway.