Jump to content


This topic is now archived and is closed to further replies.


Preload Images on Page Load?

Recommended Posts

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?

Share this post

Link to post
Share on other sites
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

Share this post

Link to post
Share on other sites
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....


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


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!!!!

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.