One of the main problems with image swaps is that JavaScript will only tell the browser to download an image when it needs it for a swap. If you have a big image, and you swap in another on a
mouseover, the browser has to download the new image. That can take awhile and ruin the fluid rollover effect you're shooting for. To see what I'm talking about, roll your mouse over the image below:
If you have a slow connection, you will have to wait for a fairly large image to load after you do the mouseover. Since some browsers won't swap in an image if it's not stored in the cache, you may not see any image swapping at all. In order to avoid these nasty problems, preload the images when the page first loads.
If you don't want to get into the nitty-gritty of how this works, you can just hop over to the Webmonkey JavaScript library and look at Nadav's plug-and-play
image preloader. However, it's always good to know the why as well as the how, so I suggest you continue reading to learn about image preloading.
next page»
