Turn Off Cache IE7

HeidiR

I have a php app that displays product images. When the image is changed by the user, IE7 appears to display the cached version instead of the new current version.

Note that when the image is changed, the name remains the same but the date and size are changed on the server.

I am having trouble turning off the cache for IE7. I currently have the following header and meta data code, which does not work in IE7:

header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');

The code works fine in Chrome and FF.

Any ideas?

HeidiR

After some additional research, I may have found a solution. I append a six digit random string as get param to the end of ALL src image file names and that seems to have fixed the caching issue. Code below:

<img src='yourimgfile.jpg?123456'>

Hope this helps someone.

bradgrafelman

IMHO, I would call that method more of a cheap "workaround" rather than a solution.

The problem with your original method is that you're setting all of these HTTP headers for the page being served up. Great. But that page has nothing to do with the images that the browser needs to load.

In other words, my suggestion (for a 'solution') would be to take those same HTTP headers you're using above and actually use them for the images.

HeidiR

Thanks for the info. Can you point me in the direction of some examples of how to use HTTP headers for images?

bradgrafelman

Assuming your webserver is Apache, you could either use a .htaccess file inside certain folders, or use a central .htaccess file in the root of your site.

A central .htaccess file would obviously have to use something like <Location> tags to match certain requests. Quick example:

<LocationMatch "/(images|css|foo|bar)/">
  Header always set Pragma: "no-cache"
</LocationMatch>

EDIT: Some reference material for Apache directives:

Header
<LocationMatch> (also see <Location> just before it)

HeidiR

Thanks for the detailed reply. You have set me on the correct path! Although, still trying to get it to work. The code below is in the root of the image folder (Images). However, with this code in place, I get an Internal Server Error when accessing the image directly from a url.

<LocationMatch "/.*.(jpg|jpeg)$">
Header always set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header always set Pragma: "no-cache"
</LocationMatch>

bradgrafelman

Woops - looks like I need to read the docs more carefully.

You should have looked in your Apache error log and found something like:

.htaccess: <LocationMatch not allowed here

which would clue you in on what the problem is.

Try using <FilesMatch> instead to match specific files.

HeidiR

Yep. The code below seems to do the trick. Thanks for your help.

<FilesMatch ".(jpg|jpeg)$">
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</FilesMatch>

cretaceous

can I ask if this means the cache is ignored on each page load?
.. and does that not add extensively to the data bandwidth being served?
thanks!

HeidiR

Yes to both. However, the images in this folder are dynamic and the current image must be displayed instead of the cached version.

bradgrafelman

Glad I could help; don't forget to mark this thread resolved (if it is) using the link on the Thread Tools menu above.