I have a page that: * Has a button whose background image will change upon rollover (done in CSS, using ":hover") * Preloads the rollover image for the button above (done using a simple jQuery script)
The page can be found at http://test.happypod.com/preloadimage/ The part that I don't quite understand is that when I inspect the page using Firebug (Net tab): * Two images are loaded upon page load: signup_ro.png and signup.png. This is expected and shows that the jQuery script successfully preloaded the rollover image, signup_ro.png * When you hover your mouse over the button, there is another request to fetch signup_ro.png although it is clear that that image has been preloaded. Why does the browser fetch signup_ro.png again although that image has been preloaded? For screenshot, see: http://test.happypod.com/preloadimage/firebug.png Thanks.
