Preload Images on Page Load?

[BaconBeast321]

Hi there, I have many image rollovers on my pages, and I have found that the Rollover occurs a full second later after having moved my mouse over it. I'm assuming this is because I am downloading the 2nd image? These are .gifs around 1-3KB so shouldn't really be big delay.

Is there a way to get a user to prep this images on initial load of the page?

[Chetan]

Display that image somewhere and if you want to hide that image use CSS.
I dont think its because the time. You can remove the line which checks if images are loaded in your function.

Give a function which you use and I can just modify it.
And since this is JS not PHP it shud be in d JS board

[ToonMariner]

if this is for a menu then perhaps consider dointh this with css rather than js rollovers.

My method of chice is quite simple....

you have you two images (say 100 x 80 px) create one image from the two that is 100 x 160 (one above the other)

now the images will be in an anchor tag so we can do this....

html...

<a id="sitemap" href="/sitemap.php" title="Site Map"><span>Site Map</span></a>

css


a#sitemap {display: block; width: 100px; height: 80; background: transparent url(../images/bgdad.jpg) no-repeat 0 0;}

a:hover#sitemap { background-position: 0 -80px;}

a#sitemap span {display: none;}

If a user then has css off they will still see the link.....

beauty of this is that the 'roll-over' image is already there!!!!