Question

i just read this article : https://developer.mozilla.org/en/HTTP_Caching_FAQ

There’s a firefox behavior (and some other browsers i guess) i’d like to understand :

if i take any webpage and try to insert the same image multiple times in javascript, the image is only downloaded ONCE even if i specifiy all needed headers to say “do no ever use cache”. (see article)

I know there are workarounds (like addind query strings to end of urls etc) but why do firefox act like that, if i say that an image do not have to be cached, why is the image still taken from cache when i try to re-insert it ?

Plus, what cache is used for this ? (I guess it’s the memory cache)

Is this behavior the same for dynamic inclusion for example ?
ANSWSER IS NO 🙂 I just tested it and the same headers for a js script will make firefox redownload it each time you append the script to the DOM.

PS: I know you’re wondering WHY i need to do that (appending same image multiple times and force to redownload but this is the way our app works)

thank you

---

The good answer is : firefox will store images for the current page load in the memory cache even if you specify he doesnt have to cache them.

You can’t change this behavior but this is odd because it’s not the same for javascript files for example

Could someone explain or link to a document describing how firefox cache WORKS?

Answer 1

What you are dealing here is only partly a matter of caching.

The whole idea of embedding images by references them by URLs, is that you can reference to the same URL multiple times, and have the browser load it only once.

So basically if you write HTML (let’s say index.html):

<img src="hello.jpg" />
<img src="hello.jpg" />

In this case, browser only invokes 2 HTTP requests: one for index.html and second one for hello.jpg.

What you need to do here is to “fake” that the images are loaded from different URLs. For this there are multiple methods.

Potentially the easiest solution is to add an extra prefix to the end of the URL. For instance if you want to load an image twice, you could add:

<img src="hello.jpg?1" />
<img src="hello.jpg?2" />

This will cause the browser the send one HTTP request to retrieve each of the images: one for hello.jpg?1 and second for hello.jpg?2. Some web servers / browsers, however, may still optimise this and send only one request to simply retrieve hello.jpg.

If this doesn’t work, you can also try passing your image through a script like PHP, as suggested in another answer.