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

Change the ETAG for the image.

Answer 2

I'm sure most browsers respect the Last-Modified HTTP header. Send those out and request a new image. It will be cached by the browser if the Last-Modified line doesn't change.

Answer 3

I have tried something ridiculously simple:

Go to FTP folder of the website and rename the IMG folder to IMG2. Refresh your website and you will see the images will be missing. Then rename the folder IMG2 back to IMG and it's done, at least it worked for me in Safari.

Answer 4

try below solutions,

myImg.src = "http://localhost/image.jpg?" + new Date().getTime();

Above solutions work for me :)

Answer 5

<meta> is absolutely irrelevant. In fact, you shouldn't try use it for controlling cache at all (by the time anything reads content of the document, it's already cached).

In HTTP each URL is independent. Whatever you do to the HTML document, it won't apply to images.

To control caching you could change URLs each time their content changes. If you update images from time to time, allow them to be cached forever and use a new filename (with a version, hash or a date) for the new image — it's the best solution for long-lived files.

If your image changes very often (every few minutes, or even on each request), then send Cache-control: no-cache or Cache-control: max-age=xx where xx is the number of seconds that image is "fresh".

Random URL for short-lived files is bad idea. It pollutes caches with useless files and forces useful files to be purged sooner.

If you have Apache and mod_headers or mod_expires then create .htaccess file with appropriate rules.

<Files ~ "-nocache\.jpg">
   Header set Cache-control "no-cache"
</Files>

Above will make *-nocache.jpg files non-cacheable.

You could also serve images via PHP script (they have awful cachability by default ;)

Answer 6

If you're writing the page dynamically, you can add the last-modified timestamp to the URL:

<img src="image.jpg?lastmod=12345678" ...