how to refresh same url image and also preserve caching?

I found most solutions are adding "?+time()" after the image link to force browser download image every time, however, this seems not an ideal solution if no real change on image.

Could the ifModified in .ajax give a help?

Any ideas are welcome, thank you!

Edit:

Is there any ways without appending "?+..." to the image开发者_如何学编程 ink?

And consider the image may be remote resource.

The ideal would be, that you append file modification time (on the server) or the ** PHP filemtime()** timestamp. This way, only when you change image on the server, the timestamp changes and all users immediately (on next load) get new version of the image.

But you have to use server-side language, like PHP. Google "filemtime()" for more info.

Representative xample:

<img src="image.png?<?php echo filemtime('image.png');?>" />

or:

<?php
echo '<img src="image.png?'.filemtime('image.png').'" />';
?>

You can also write a function to do that for you:

function image($file) {
   return $file.'?'.filemtime($file);
}
echo '<img src="'.image('image.png').'" />';

You could add the timestamp and filesize (in combination) of the image as query string (the thing after the quesionmark)

Basically any metadata of the file can be used for that, also seen md5() implementations, but I am not sure how good this scales.

This is an easy way without a database.

There is also another solution:

You can also set Expires header one year in future, like this:

Expires: Thu, 15 Sep 2011 20:00:00 GMT

This means browser will try to cache the image for one year, before requesting it from server again. But that can be bad, if you change the image in that time. Then user will have to do hard refresh (Control+F5) to force refresh. Stay with my 1st solution, or even beter, use both.