Reload a cached image with javascript

Question

is it possible to use javascript to reload a particular image that is has cached?

On my site users can upload new avatars. After this is done, I want the browser to redownload the new avatar, so the user can see that the change is made.

At the moment, I'm doing it like this:

$('profilePic').src = 'flash/userImage.ashx?id=12345677&type=avatar&t=' + new Date().getTime()

userImage.ashx returns images based on id and queried type. It doesn't use the 't' parameter - this is just so the url is different, so the image reloads.

This works fine on the page where the user uploads their new avatar, but elsewhere on the site it will still use the cached image.

I could turn off caching for user avatars, but I don't really want to do this. Is it possible to force a particular cached image to reload?

Answer 1

Maybe caching with ETag is a solution: http://en.wikipedia.org/wiki/HTTP_ETag

When a different users loads a page after the avatar update, the ETag he sends with the request for the image is different than the ETag generated on the server and should therefore result in a 200 response instead of a 304, so the image is reloaded.