Jump to content


Preload Images on Page Load?

  • Please log in to reply
2 replies to this topic

#1 BaconBeast321

  • Members
  • PipPip
  • Member
  • 23 posts

Posted 14 August 2006 - 09:20 AM

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?

#2 Chetan

  • Members
  • PipPipPip
  • Advanced Member
  • 162 posts
  • LocationIndia

Posted 14 August 2006 - 09:25 AM

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
I am a PHP Guru, ask me questions if you want to

#3 ToonMariner

  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 14 August 2006 - 09:49 AM

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!!!!
follow me on twitter @PHPsycho

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users