preload images

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
martinco
Forum Newbie
Posts: 18
Joined: Mon Jun 25, 2007 10:06 pm
Location: Costa Rica

preload images

Post by martinco »

hi!
how should i preload images that will be used in rollovers?
which way do you recommend?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Code: Select all

foo = new Image();
foo.src = 'some url';
User avatar
martinco
Forum Newbie
Posts: 18
Joined: Mon Jun 25, 2007 10:06 pm
Location: Costa Rica

Post by martinco »

does it matter if the rollover is done by the css?
i mean, using backgrounds with a:hover and so on.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

If you're referring to background images, the CSS handling code will load the images automatically.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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. ;)
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
Post Reply