Single Blog View

As well as being an absolute classic Motörhead song, B-side of Iron Fist if memory serves (which I have on red vinyl tucked away in box somewhere in the UK), this is a little article on caches.

I'm not going to attempt to explain all the stuff you have to put into the top of a web page to stop the browers trying to store things to memory (as there appears to be different code for each browser) you can just search for this and you will find it. Where I had problems was stopping the browsers from putting images in memory. For the graffiti wall, as described above, an image is created for the text that is entered. This is fine, you get taken to a preview page so you can see if you want to regenerate if the color or font don't work well. Now is when you hit the problem. It's easy to get it to re-create the image (say img0001.jpg) and to get the browser to reload the page. But, the browser think's it already knows what img0001.jpg already looks like (it copies it down to your temporary files so it doesn't have to keep getting them from the server - again the browser seems to think it knows better than the person writing the page). The result being that even though the image has changed on the server, you won't see the change on your browser as you will be looking at a stored image somewhere on your hard disk.

Originally I thought there was some kind of image cache that needed to be disabled, but it is just as simple as the browser is trying to save time with image reloads.

How to fix? Trick the browser into thinking it's not seen the image before. You can transfer variables to an image or file when it's loaded and we can use that to our advantage here. instead of loading an image with src='img0001.jpg', use src='img0001.jpg?'.rand() [note PHP syntax, you may need to use +Math.random() instead of .rand() if you want to do this in javascript]. The question mark just states where the file ends and where the variables start. unless the variable has been created before, the browser will ask the server for the new image. Using the random function is a simple way of generating a number that the browser [shouldn't] have seen yet.

But what's more important is that I got to write an umlaut.