4

Consider the following html page, which can load in many large png files:

<html> <head> <script type="text/javascript"> function hide( ) { document.getElementById("here").innerHTML = "hidden"; } function show( ) { var loadMe = ""; for (var i=1; i<250; i++) { loadMe += "<img src='http://example.com/" + i + "_a.png'><br>"; loadMe += "<img src='http://example.com/" + i + "_b.png'><br>"; } document.getElementById("here").innerHTML = loadMe; } </script> </head> <body> <a href="javascript:hide();">hide</a> <a href="javascript:show();">show</a> <div id="here"></div> </body> </html>

In IE, Safari & Opera on a windows machine, the images on this page are only loaded once (monitored with FreeMeter) when the show and hide buttons are toggled.

However, in Firefox (freshly installed), some images are loaded from the server multiple times (we never match the initial peak in network requests... a few things are loaded from the cache).

The response headers of the images read:

Date Wed, 18 Mar 2009 11:42:02 GMT Server Apache/2.2.3 (Red Hat) Last-Modified Mon, 27 Oct 2008 19:19:47 GMT Etag "1abb7d7-292-45a41039f7ac0" Accept-Ranges bytes Content-Length 658 Cache-Control max-age=7257600 Expires Thu, 15 Apr 2010 20:00:00 GMT Connection close Content-Type image/png

Looking into about:cache, most of the images loaded appear to be listed there (although inspecting the cache between hide/show clicks, there appear to be missing images):

Number of entries: 462 Maximum storage size: 50000 KiB Storage in use: 5593 KiB ... Key: http://example.com/23_a.png Data size: 16139 bytes Fetch count: 13 Last modified: 2009-03-18 07:40:14 Expires: 2009-06-10 07:40:00

What's firefox expecting from me to reload these images from the cache so we can go easy on the network calls? Thank you!

Update

If I open this page in a new tab after showing / hiding in the first tab, the second tab makes no network requests. The first tab continues to make network requests.

Improve this question

4 Answers 4

Reset to default
3

The bug is described here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Additionally to Rich's answer, you could try to change some Firefox cache config values and see if they alter the behaviour:

browser.cache.check_doc_frequency browser.cache.disk.capacity browser.cache.memory.capacity
Improve this answer

Comments

1

Another way to remove the cache hit, to speed up page performance, and to reduce network congestion (generally speaking, only two requests per domain execute at a time) would be to use CSS Sprites.

If all of your images are a similar size, combine some of them and use CSS to control which position of the image is displayed. You'll save the HTTP Requests for each additional image and drastically enhance the page. Many larger web sites (such as Yahoo!) use this technique.

Improve this answer

1 Comment

Good suggestion (and we do css-sprite-slice some of our images). However this does not solve the caching problem. We still need to load in lots of images...
1

I can't tell you why Firefox is behaving this way (or better yet, how to override this behaviour), but I'd suggest a different approach that might circumvent the problem. Instead of building the HTML string over and over again and completely removing these img elements from the DOM, why not just build it once with an outer container div and show/hide the div? This way, the imgs are always part of the DOM (and Firefox will most likely not feel the need to remove the images from the cache).

Improve this answer

1 Comment

Thanks for the suggestion. However: (1) upon returning to the site, I would like the images to be re-loaded from the cache. (2) the images are also being used by flash, so show/hide them doesn't fully solve my problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.