Preload marker images for Google Maps

Question

I am using Google Maps V3 API to create a google map where the markers change their marker icons on mouseover. However i notice the icons flicker once the first time the user does it to that specific marker, and to every marker, which I guess is due to the mouseover images taking some time to download.

To solve this, I am thinking of preloading the mouseover icon images. How can I do this?

Answer 1

I'm unsure if this works in every browser, but on modern browsers (FF 3.6+, IE8/9 (I think), Safari/Chrome), with cache enabled, simply adding the elements to the DOM loads them and caches them (i.e. put them on the page in a hidden div), so the next time they're requested, its from your cache, not the server, totally eliminating the flash.