Sometimes the simplest of solutions elude me. Blog entries and tutorials seem to be more well thought out, time-consuming projects that attack more complex issues or come up with more innovative solutions. Look at websites like A List Apart or Smashing Magazine.

Typically, I would love to come up with lengthy tips or tutorials as these people do, but often I end up with a wealth of drafts for ideas, but never get any real helpful content out to my readers. What I need is something more like a Tumblelog, which is more of a quick and dirty (not like that) stream of consciousness as a blog entry.

So, here I go, entry #1.

Dodging Cache Issues

I swear every time there is an issue with a client project or user on a website, it is a cache issue. You’ve seen it before. You are using the same image name or same stylesheet name and a users computer is caching it and causing issues with your new content.

A simple solution is just to rename the file. Thats easy right? Sometime yes. Sometimes it isn’t. We all may need to keep the same file names for a myriad of different reasons. Ok. Here’s mine.

Episode #1

I have a flash file that I update every couple of months. I don’t want to deal with renaming it, but I don’t want it to serve up the old version as cache. The solution is simple:

My code previously:

<embed....src="myfile.swf"....>

My NO-cache code:

<embed....src="myfile.swf?v1"....>

Basically, I’m appending a query string to the file as if I am passing in variables. Since webservers see this as a different file, it will cache it as a new file name, specifically “myfile.swf?v1″. Also, this makes it easy for versions. Next time you export your file, it will be v2, v3, v4… and so on.

Episode #2

I have a webcam that transfers a camera shot via ftp to my webserver. But, it FTP’s the image to the same directory with the same filename every time. Yeah, I could write a PHP script to get the picture and serve it up as a different file name every time, but that’s way too hard for a simple issue.

Also, I used to use a META REFRESH to refresh the page to serve up a new image, but that is frowned upon and refreshes the entire page. So, naturally I am thinkin’ JavaScript.

So, I get this rad script all hooked up to call a function every couple of seconds to refresh the image…here she be:

function refreshImage(){
if( document.getElementById('webcam-image') ){
setInterval(
function(){
var img = document.getElementById('webcam-image');
img.src = img.src;
},
4000
);
}
}

I’ve wrote some code to run this function on page load. Basically, this code just resets the src attribute of the image every 4 seconds. However, because the image is cached, I have issues. The code works fine, but keeps serving up the same image, so the user doesn’t see a change.

So, to employ my NO-cache technique, I whip up the following code:

function refreshImage(){
if( document.getElementById('webcam-image') ){
setInterval(
function(){
var img = document.getElementById('webcam-image');
if( !img.origSrc ) img.origSrc = img.src;
img.src = img.origSrc + "?" + (Math.random()).toString();
},
4000
);
}
}

Here, I save the original src attribute in a variable called origSrc and then every 4 seconds (4000 ms), I set the src attribute back to it’s original url. However, the magic comes in the querystring. I didn’t want to mess with an incrementing number, so I am just using a random number, but that’s all I need. So, when this function is called the first time, lets say the random number is 0.30301759604092937 (a decimal number between 0 and 1), the image’s src attribute becomes src="live.jpg?0.30301759604092937. Four seconds later, the code is ran again and the source attribute becomes src="live.jpg?0.0826765920752568, thus always rendering a new NON-cached version of the image. Voila!

P.S. If this technique is way too obvious or if you already knew it, please feel free to say “I agree.” Comments that insult should be reserved for an infinite amount of time.

Did you dig this? Share it or like it!

This entry was posted on Thursday, March 22nd, 2007 at 10:00 am and is filed under CSS, JavaScript, Tumblelog, howto. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.