Page 1 of 1

preload images

Posted: Mon Jul 09, 2007 9:18 pm
by martinco
hi!
how should i preload images that will be used in rollovers?
which way do you recommend?

Posted: Mon Jul 09, 2007 9:23 pm
by feyd

Code: Select all

foo = new Image();
foo.src = 'some url';

Posted: Mon Jul 09, 2007 10:16 pm
by martinco
does it matter if the rollover is done by the css?
i mean, using backgrounds with a:hover and so on.

Posted: Mon Jul 09, 2007 10:52 pm
by feyd
If you're referring to background images, the CSS handling code will load the images automatically.

Posted: Tue Jul 10, 2007 10:08 am
by pickle
Are you trying to eliminate the flicker that sometimes happens when a CSS rollover is rolled over? I've heard of using Javascript to pre-load the images, but I'm not sure if those are cached. You could always create a div with the "display:none" property set & have it have the same background image as the rollovers. I think that'll work.

Posted: Tue Jul 10, 2007 11:03 am
by superdezign
pickle wrote:Are you trying to eliminate the flicker that sometimes happens when a CSS rollover is rolled over? I've heard of using Javascript to pre-load the images, but I'm not sure if those are cached. You could always create a div with the "display:none" property set & have it have the same background image as the rollovers. I think that'll work.
*Ahem* visibility:hidden would likely be a better choice. ;)

Posted: Tue Jul 10, 2007 11:09 am
by pickle
Perhaps. I'm pretty sure Firefox doesn't load resources in hidden elements until they become visible. It may also have that behaviour with display:none - but I haven't experienced it.

Posted: Tue Jul 10, 2007 11:34 am
by superdezign
Possibly. I haven't tested it either.


Also, a good way to do what you're after is to put both parts of the rollover in the same image, and then move the background image on rollover. This has become very popular, so finding an example is easy. Go to Digg and look at their main logo rollover.