PDA

Click to See Complete Forum and Search --> : Preloading Images Using CSS

JavaSardine
09-14-2006, 03:37 AM
I'm looking to preload some images for a picture gallery. I'm using JS to control the loading of new pics. The only problem is that when I click on a new pic, it takes a few seconds to load. I want to load the bigger images as the user loads the page and then when the user clicks the pic will load from the cache instantly.

Isn't there a method of loading pics using CSS my not setting the display property to none or positioning it off of the page? If so, is the method cross-browser compatible? Also, where would you insert the images?

Thanks!
Kravvitz
09-14-2006, 04:23 AM
You could, but why don't you use the JavaScript to preload them?
JavaSardine
09-14-2006, 04:24 AM
You could, but why don't you use the JavaScript to preload them?
Is that a preferred technique? If so, how do you do it?
Kravvitz
09-14-2006, 04:27 AM
Since you're using JavaScript to make them visible, it seems silly to use another method to preload them. Besides, it's best to keep content, presentation, and behavior as separated as is practical.

Google is your friend. (click this) (http://www.google.com/search?q=JavaScript+preload+image)
JavaSardine
09-14-2006, 04:29 AM
Since you're using JavaScript to make them visible, it seems silly to use another method to preload them. Besides, it's best to keep content, presentation, and behavior as separated as is practical.

Google is your friend. (click this) (http://www.google.com/search?q=JavaScript+preload+image)
Thanks for pointing out keeping content, presentation and behavior separate...it's good to keep that in mind. I do know how to preload images using JS, I was just wondering if there is a particularly "great" way of doing so. I also thought that I would ask about CSS because I've read about it being a useful tool for preloading images.
Kravvitz
09-14-2006, 06:46 AM
I do know how to preload images using JS, I was just wondering if there is a particularly "great" way of doing so.
That would depend on the naming convention used for the image file names.

I also thought that I would ask about CSS because I've read about it being a useful tool for preloading images.
I would only use CSS to preload images if I was going to use them with a pseudo-class, e.g. :hover, :active, and :focus.

This may interest you: Fast Rollovers Without Preload (http://www.wellstyled.com/css-nopreload-rollovers.html)