Script to Preload Images on page open

I have a navigation link mouseover that loads an animated image when mouseover a static image to give a Flash-like rolling affect; I am using CSS for the rollover.

The animated image takes a second to load so when users first place their mouse over the non-animated image... a blank appears until the animated one is loaded.

Is their a way I can get the images to load when the pages open to avoid that?

 

Yes, you can do it with:

yourImage = new Image(); 
yourImage.src = "yourImageFile.jpg";

Code (markup):

Take a look at this page for explanation and examples: http://articles.techrepublic.com.com/5100-22-5214317.html