how to clear or replace a cached image

Question

I know there are many ways to prevent image caching (such as via META tags), as well as a few nice tricks to ensure that the current version of an image is shown with every

Answer 1

In the event that an image is re-uploaded, is there a way to CLEAR or REPLACE the previously cached image client-side? In my example above, the goal is to make the browser forget what "42.jpg" is

You're running firefox right?

• Find the Tools Menu
• Select Clear Private Data
• Untick all the checkboxes except make sure Cache is Checked
• Press OK

:-)

In all seriousness, I've never heard of such a thing existing, and I doubt there is an API for it. I can't imagine it'd be a good idea on part of browser developers to let you go poking around in their cache, and there's no motivation that I can see for them to ever implement such a feature.

I CANNOT use the META tag method OR the timestamp method, because I want all of the images cached under normal circumstances.

Why can't you use a timestamp (or etag, which amounts to the same thing)? Remember you should be using the timestamp of the image file itself, not just Time.Now.
I hate to be the bearer of bad news, but you don't have any other options.

If the images don't change, neither will the timestamp, so everything will be cached "under normal circumstances". If the images do change, they'll get a new timestamp (which they'll need to for caching reasons), but then that timestamp will remain valid forever until someone replaces the image again.

Answer 2

I usually do the same as @Greg told us, and I have a function for that:

function addMagicRefresh(url)
{
    var symbol = url.indexOf('?') == -1 ? '?' : '&';
    var magic = Math.random()*999999;
    return url + symbol + 'magic=' + magic;
}

This will work since your server accepts it and you don't use the "magic" parameter any other way.

I hope it helps.

Answer 3

Try this code snippet:

var url = imgUrl? + Math.random();

This will make sure that each request is unique, so you will get the latest image always.

Answer 4

See http://en.wikipedia.org/wiki/URI_scheme

Notice that you can provide a unique username:password@ combo as a prefix to the domain portion of the uri. In my experimentation, I've found that inclusion of this with a fake ID (or password I assume) results in the treatment of the resource as unique - thus breaking the caching as you desire.

Simply use a timestamp as the username and as far as I can tell the server ignores this portion of the uri as long as authentication is not turned on.

Btw - I also couldn't use the tricks above with a google map marker icon caching problem I was having where the ?param=timestamp trick worked, but caused issues with disappearing overlays. Never could figure out why this was happening, but so far so good using this method. What I'm unsure of, is if passing fake credentials will have any adverse server performance affects. If anyone knows I'd be interested to know as I'm not yet in high volume production.

Please report back your results.

Answer 5

The reason the ?x=timestamp trick is used is because that's the only way to do it on a per image basis. That or dynamically generate image names and point to an application that outputs the image.

I suggest you figure out, server side, if the image has been changed/updated, and if so then output your tag with the ?x=timestamp trick to force the new image.

Answer 6

Change the ETAG for the image.