NoCache for JavaScript and Flash

I just spent a very frustrating day wrangling with cached images. Both JavaScript and Flash have trouble updating dymanic images, when these are cached by the browser. This can be a problem if, for example, your website has sets of images, such as catalogues, that could be updated at any time. Or if the website needs to constantly reload a single image with the same filename, such as a self-updating webcam image.

In my case, it was both. After delving into numerous Internet sources, with some trial and even more error, I finally distilled a solution that, with slight adjustments, works for both JavaScript and Flash.

The basic principle is to trick the browser into thinking that a different image, with a different name, is being loaded. This can be achieved by appending a constantly changing variable into the url of the loaded image:

myImage.jpg?nocache=" + new Date().getTime();

The getTime() method of the Date object returns the number of milliseconds since January 1, 1970 to this date, (or another date specified in the instance). This is perfect for us, because this means that you get a unique number, each time – unless you can refresh faster than a speeding millisecond…

You could also play with the Date object’s methods and exchange getTime() for getHours() or getDate(). This would refresh the images every hour or every day, keeping them in the cache for the current session, which could be useful in some instances.

In JavaScript all you need now is to assign this to the src property of an image, for example:

var cam1 = document.getElementById("cam1");
cam1.src = "../images/cam1.jpg?nocache="
+new Date().getTime();

If you trace out the resulting src or nameProp of the image (I tend to use alerts for this), the returned string will include the url encoding – but will display the correct image, fresh from the HTTP oven.

In Flash you’d use essentially the same syntax, but it’s slightly more complicated. If you attempt to load an image with this url from the IDE, it won’t find the image and will return an error instead. However, it will work fine when embedded in a browser.

To make it work in both, you need to test for the playerType first, before adding the url encoded variable:

var loader:MovieClipLoader;
var viewLoader:MovieClip;
var url:String = "images/catalogue/collection/cat1.jpg";
if (System.capabilities.playerType == "PlugIn"
|| System.capabilities.playerType == "ActiveX"){
      url+="?nocache="+new Date().getTime();
}
loader.loadClip (url, viewLoader);

 

 

This solution is not only limited to images – it can also be used when loading other file types that you wouldn’t like cached, such as XML, SWFs and other files or assets.