Browser shows the same image after the update

Browser shows the same image after the update

If there is an image change on the same file name, say logo.png or front.jpeg, the change won’t happen right away unless you force refresh it on browser to clear the cache.
The problem with this one is when you have dynamic updates and your users couldn’t see the change right away b/c of the cache.

The simple fix for this would be appending version at the end of the file name. Like your original html would look like:

img height="200" src="/path/to/image/file.ext" 

Then appending the version at the end

img height="200" src="/path/to/image/file.ext?v=someVersionGoesHere" 

For any backend it would be easy to append the versioning when the image is presented. It could be random number or unix timestamp would work in this case too..

If you are generating the images from javascript, say based on the json response, you can do

var version = new Date()->getTime(); //get the unix timestamp
var path = "/path/to/image/file.ext?v="+version;

$('#image_id').attr('src', path);

Shall do the trick. I used jQuery her but, it is not limited to it..

Upgrade mysql version from 5.5 to 5.6

Git add not working for folder with .git folder

Mac Numbers document to Excel

Select an element with multiple classes jQuery

Change the name of computer in Mac

Mommy look.. Upgrading jQuery breaks live :(

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*