Question

I have a PHP page with some Javascript that changes the SRC attribute on a IMG tag after a fixed interval of time (5 seconds). There is a fixed number of images that I cycle through. The PHP builds a string array for all the image URLs. The images are small most less than 10k.

How can I tell if the browser is caching the images and if not what must I do to ensure that a browser does cache them?

Answer 1

Yes the browser will cache them, often even when your headers say otherwise. I have found the best combination is to issue the necessary Cache-Control headers along with appending a random string to the source URL.

Example, set the max age in seconds:

header("Cache-Control: max-age=3600");

Then append a random string to your img sources. This will need to be in Javascript, not in PHP because once your URLs are generated in PHP they won’t keep updating with a new random string:

var randomString = "" + new Date().getTime();
var imageUrl = yourImageArray[someIndex] + "?" + randomString;

Hope you get the idea.