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 page load (such as image.jpg?x=timestamp), but is there any way to actually clear or replace an image in the browsers cache so that neither of the methods above are necessary?

As an example, lets say there are 100 images on a page and that these images are named "01.jpg", "02.jpg", "03.jpg", etc. If image "42.jpg" is replaced, is there any way to replace it in the cache so that "42.jpg" will automatically display the new image on successive page loads? I can't use the META tag method, because I need everuthing that ISN"T replaced to remain cached, and I can't use the timestamp method, because I don't want ALL of the images to be reloaded every time the page loads.

I've racked my brain and scoured the Internet for a way to do this (preferrably via javascript), but no luck. Any suggestions?

Answer 1

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 2

To replace cache for pictore you can store on server-side some version value and when you load picture just send this value instead timestamp. When your image will be changed change it`s version.

Answer 3

Add the image url like this

"image1.jpg?" + DateTime.Now.ToString("ddMMyyyyhhmmsstt");

Just add random string in the querystring

Thank You

Raju Jetla

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

Contrary to what some of the other answers have said, there IS a way for client-side javascript to replace a cached image. The trick is to create a hidden <iframe>, set its src attribute to the image URL, wait for it to load, then forcibly reload it by calling location.reload(true). That will update the cached copy of the image. You may then replace the <img> elements on your page (or reload your page) to see the updated version of the image.

(Small caveat: if updating individual <img> elements, and if there are more than one having the image that was updated, you've got to clear or remove them ALL, and then replace or reset them. If you do it one-by-one, some browsers will copy the in-memory version of the image from other tags, and the result is you might not see your updated image, despite its being in the cache).

I posted some code to do this kind of update here.

Answer 6

You can append a random number to the image which is like giving it a new version. I have implemented the similar logic and it's working perfectly.

<script>
var num = Math.random();
var imgSrc= "image.png?v="+num;
$(function() {
$('#imgID').attr("src", imgSrc);
})
</script>