The Cache Trick

There’s a very nice trick you can use to force-reload images that are delivered by a script (such as the Hiveware Image Rotator) but get stored in a browser’s cache.

To understand the Trick and why you might need to use it, you first need to understand the problem with web browsers.

The Problem with Web Browsers

There’s a problem with web browsers. This problem is called a cache. The cache is a problem because it stores things that shouldn’t be stored. Browsers do this because they assume that the user is browsing over a 14.4 baud modem and must reduce bandwidth at all costs.

This is hardly true anymore. Unless you’re using a 14.4 or 28.8 modem, you should disable your cache. Zeldman explains how:

in IE5/Mac, go to Preferences: Advanced; in the Cache panel, check �Always.� From then on, IE will download changed files instead of loading outdated ones from your hard drive. To force Safari to load new files instead of outdated ones, download Safari Enhancer and set it to Deactivate Cache.

Once you’ve done this, you’ll finally experience the web as it truly exists. It will be like stepping through the looking-glass, and it will feel like the first time you tasted cotton-candy when the carnival came to town.

CSS Background Images

Something many people seem to want is the ability to rotate images. Hence the free Hiveware Image Rotator, a simple PHP script that allows you to rotate images on a page.

But if you want to rotate a CSS-background image, you’re (seemingly) out-of-luck, because most (if not all) browsers will cache a CSS-background image, preventing it from reloading. So, although you could use the Image Rotator to generate a CSS-background image like this:

background-image: url(http://example.com/rotate.php);

Your visitors wouldn’t see the image change unless they cleared or disabled their cache (as described by Zeldman above).

The Trick

The trick is an easy one, and you can see it in action right here.

A nice feature of using a PHP, ASP, JSP, or ColdFusion to deliver your pages is that you can insert a little snippet of code here and there, as needed. In this case, a 32-character string of random letters and numbers (sometimes called a Unique ID) is generated and added to the CSS background tag, like so:

background-image: url(http://example.com/rotate.php?id=e74b9c816a5303cf337dcfb63f7d86e1);

This makes the browser think that the image is unique each time it loads the page, because the Unique ID changes each time the page reloads. The PHP script isn’t programmed to look for or do anything with the id=e74b9c816a5303cf337dcfb63f7d86e1 (which just sets a variable in PHP), so it ignores it. But to the browser, it looks unique and therefore forces the browser to reload the image rather than using the cached version.

Go ahead, take another look and watch the background and Unique ID change.

The code to generate a nice, 32-character string in PHP looks like this:

<?php $randy = md5( uniqid (rand(), 1) ); ?>

Then, to output the code anywhere, this:

<?php echo($randy); ?>

You can use this little trick anywhere you generate dynamic content and are concerned your output might get cached, like this:

background-image:
url(http://example.com/rotate.php?id=<?php echo($randy); ?>);

Which is a not-so-bad workaround for bad browser behavior.

More articles in the Archive →