Image preloading isn't working for images in FireFox

I'm dynamically switching background images. Naturally, they need to be preloaded to display promptly. I am preloading them, am able to following in FireBug as the images load. When the background image switches, I see the images download again in FireBug.

Here's my url: http://www.morganpackard.com/siteRoot/

Strangely, if I reload the page, everything works as expected. The steps I'm taking are as follows:

1) clear FireFox cache 2) reload page Images load slowly, and, apparently are neither being pre开发者_StackOverflowloaded nor cached. Every time there's an image swap, the image downloads again. 3) now reload the page again without clearing the cache Images load and swap instantly, everything works as expected.

So it looks like I'm having to RELOAD before FireFox will read images from the cache. This is kooky. Any ideas?

Note: My images are ENORMOUS. I'll compress them, of course, but want to get this preloading this sorted first.

I didn't read your code, but for preloading to work, you must add the image to the document DOM, otherwise it can be garbage collected aggressively.

Checking with HttpFox, I am not seeing further http requests - when clicking around - for your background images after the initial load. If I hit "refresh" then the images are reloaded. I think this is correct and what you'd expect. However be aware that reloading of a page and its assets like images, css etc on a page refresh is dependent on both response headers and any over-rides for these specified in your browser/plugin tools. Take a look at pragma: no-cache and W3C Cache-Control (Section 14.9)

Edit: With firebug on, I am seeing reloads when I click around. This is presumably an artefact of Firebug. Turn off firebug and you wont have the reloads.