5

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?

BigMac66
  • 1,528
  • 5
  • 19
  • 35
  • Of course browsers cache images. – Matt Ball Sep 17 '12 at 20:33
  • 2
    Yes, install firebug or the webkit debugger and it will tell you if the browser used a cached version or not. People get around it by appending a number to the end of the file – Mike B Sep 17 '12 at 20:33
  • For the most part, the browser's caching is controlled by the user. – j08691 Sep 17 '12 at 20:34
  • @j08691 This is just incorrect. Most major browsers will adhere to properly configured Cache-Control headers, giving you significant control over how the browser caches your content. – Mike Brant Sep 17 '12 at 20:36

2 Answers2

2

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.

davidethell
  • 11,708
  • 6
  • 43
  • 63
  • OK how do I do that? I have several images referred to in the PHP file how do I make sure only the images in the cycle are cached? I don;t care about the others so a solution that simply caches everything for about 1 hour would be fine too... – BigMac66 Sep 17 '12 at 20:43
  • Ok, I misunderstood your original request a bit and have updated my answer to set the cache-control to 1 hour. Further, are you wanting to have the browser cache the images for an hour, but then make sure that after an hour the browser forces them to reload? – davidethell Sep 17 '12 at 20:46
  • I don't think anyone will be on my site for more than an hour - I just don't want to load a 10k image every 5 seconds... that is just a needless waste. – BigMac66 Sep 17 '12 at 20:59
1

If you need to try to force the browser to not cache certain images, you should properly configure the headers the server is sending for each image request such that they send the proper Cache-Control headers.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103
  • I want to cache them - just not sure how to make sur that they are. – BigMac66 Sep 17 '12 at 20:41
  • As was mentioned in the comments to the original question, you could use Firebug, WebKit Debugger, devloper tools, etc. to look at each individual request that the browser makes. If the image was loaded, but there was not a network request for it, it was populated from cache. – Mike Brant Sep 17 '12 at 20:44