cache woes, how to force an image to refresh or load fresh

The simple trick here is to make the browser think that the image file is new. Most web professionals know that browsers will cache and image and remember it’s url and then if you try to access that url again it will show you the image you already downloaded rather than getting a new copy form the server every time. This is great and helps us surf the web faster overall. Sometimes this can bite us though, specifically when you are trying to show someone an image which you just updated and all they see is the old one. If you are in the business of creating things online and having them approved online, you could run into this situation multiple times before lunch every day. Raise your hand if you’ve had to walk a client though how to clear their cache, fun times right? One more situation when this is helpful is I’ve noticed some browsers (firefox) caching animated gifs, and they will not replay the animation if you refresh the page. But for banners and such sometimes you will want the animated gif to replay on reloading the page. I’ve started using this little trick to keep my pages from caching the images and saving me and clients confusion.

So the browser remembers the url and if you try to get that same url later, it will just display what you’ve already downloaded. The trick is to make the browser think it’s a new url. You can do this pretty easily by adding a query string to the end of the url. Those are the urls that have the file name and then it’s followed by a ‘?’ and some jibberish, for example: my-image-i-dont-want-cached.jpg?version=something. This will work once, but the real trick is to have a unique query string every time. I’ve seen this done with random numbers and a number of other things, but my favorite is to add the date to the url. With the date you know that it will always be unique (as it includes seconds).

There are a couple different ways we can append this to the url. They depend on which technologies we have available to us. It can be done with php or javascript. I prefer the php method because it is created as the page is delivered from the server, while the javascript version is set as the image loads, but either one works and I wouldn’t do this in a production since in that case, we want the cache to lighten the load on our servers.

As long as you understand what cache is and why it’s a good thing to have in most scenarios and you are in one of those exceptions where it’s best not o have it, here’s how to do it.

JS Method

[cc lang=”js”]
function freshimg(image){
if (image.src.indexOf(“?”) == -1)
image.src = image.src + “?v=” + Date();
}
[/cc]
[cc lang=”html”]

JS reload append to img src

[/cc]

PHP Method

[cc lang=”php]

PHP append to img src

” width=”160″ height=”600″ border=”0″ />

[/cc]

wideskyscraper from dummyimage.comHere’s some reference for the Date in javascript and php. Now to see it in action: here are a few examples, although this isn’t the best scenario for them, since these images won’t be changing. I’m just using some dummyimage.com and an animated gif inspired by the same.

Link to view example of how to force a fresh image to load.

7 thoughts on “cache woes, how to force an image to refresh or load fresh

  1. PHP option worked perfectly! (once I realized I needed to save the .htm file as .php (I’m a total newbie)… the java option loaded the graphic, then milliseconds later restarted the animation… so I saw frames 1 through 5 then it restarted from frame 1 (total animation is 47 frames) — not the best results. Thanks for posting this. I got the result I was looking for with the PHP.

  2. i was appendChild ing new (identical) non-looping gifs, and after the 1st, it was stuck on the last frame. I spent hours trying to figure it out! This js trick worked! thanks!

  3. You are awesome! I tried so many of the recommendations at stackoverflow, and not a single one worked….I wish I had clicked the link to this page first. It would have saved me a lot of wasted time. Everyone, this is the solution you’ve been looking for. The php option above was an instant fix for my animated gifs going out of sync because they wouldn’t refresh in firefox. Many thanks!

  4. Thanks, thanks, thanks, thanks! I searched for something like this for now 1 hour… your solution is the only one that works so far. Thanks for saving my day šŸ™‚

Comments are closed.