Image preloading isn't working for images in FireFox.

Question

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 preloaded 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.

Answer 1

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.

Answer 2

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.

Answer 3

mogancodes, I am having the exact same issue in Firefox 3.5.5. I clear the cache and load the page and the preloaded images keep downloading every time. If I then reload the page without clearing the cache, everything works perfectly. However I am NOT seeing this problem in any other browsers INCLUDING Firefox 3.0.13 and Firefox 2.0.0.20. Looks like a bug in Firefox 3.5 to me. Have you been able to make any progress on the problem?