I've recently discovered a technique, through trial and error, that seems to give better rollover performance. Let, me know if any of this is common knowledge, btw. With some of the auto-generated scripts (ImageReady etc) and in most JavaScript manuals, rollovers are handled by preloading images using the new Image() method and calling a function using the *onload* event. One problem that i've had with this approach on (slow modems), is that IE and other browsers do not consistently cache the images that act as the *over* state, and so when you roll over it attempts to download the image each time. This seems to be related to browser cache settings, but honestly it doesn't seem to matter sometimes.

Bascially, in order to get the browser to cache the images, I've found the best way is to load the *over* images at the bottom of the document, or anywhere that they will not be obtrusive, and size each preloader image to 1x1 pixels. Then the src is immediately available for swapping.

That way your rollover function or script can be dramatically less complex. Has anyone tried this? Do you know of any drawbacks to it?