THREE WAYS TO PRELOAD IMAGES
You have a few options when it comes to preloading your images:
companyLogo = new Image();
companyLogo.src = "logo.gif";
OPTION 2: USE A LITTLE CSS BABY!
You can use CSS to hide your images that you want to preload. Ok this is how it works:
You know that the browser loads stuff in your page from the top down - so stuff appearing at the top of the page will load (into memory) before stuff appearing on the bottom of the page.
With that in mind, all you have to do to get fast rollovers is to load your rollover images at the top of the page. Now the problem is that you don't want people to see the images yet, so to hide them, all you have to do is stick them inside a hidden div:
<div style=" display:none;">
alt=" not really needed actually ... " height="350" width="350" >
alt="not really needed actually ..." height="350" width="350" >
Needless to say, you would stick this div near the top of your page.
Since we are doing this to only load the image into the browser's memory, the alt tags are not required, but the height and width attributes can help a little with speed.
OPTION 3: ANOTHER OLD TRICK: STICK THE IMAGES IN A HIDDEN FRAME.
A hidden frame is just a frame window set to 0%. But since you should not be using frames, this is not a viable option.
But you could do the same with an iframe and CSS, but why would you when you can just do it with a hidden div.This I think can be the basis to a new article ... thanks! Top