[jQuery] Image Preloading
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.