Monday, August 29th, 2005
Internet Explorer and Ajax image caching woes
Inserting chunks of HTML via Ajax is cool stuff, and speeds things up quite a bit. As long as you don’t happen to insert some images and you’re using Internet Explorer 6, that is.
Here’s the problem: Internet Explorer forgets to look into its own cache when inserting HTML via JavaScript DOM manipulation (read: if you use
imgtags or any tags with CSS background images, Internet Explorer will always try to redownload these images). Read the detailed account on this.Microsoft says it’s designed that way. Well. Sure.
Also, the Cache-Control header, if set to something like
private, max-age=86400is not handled too well, as Internet Explorer will always try to revalidate the file (Safari and Firefox don’t, they will use their cached copy until the time given by
max-agehas elapsed, and only then will do the cache revalidation).A workaround for this (not perfect, but as good as it gets) is to send proper Last-Modified, Cache-Control, and ETag HTTP headers, so Internet Explorer sends back an If-Modified-Since header trying to find out if it should refresh its cache. We can then just answer with a 304 Not Modified HTTP status, and IE will use the cached image anyway. (Note that IE suddenly seems to “remember” it has the image in the cache here!).
And then continues to show us code to help out the situation.
Related Content:
Hmm… This post doesn’t reflect my experience. I am in the process of building an AJAX app and I was having the problem of IE and Firefox caching the files that I loaded and inserted into a DIV using InnerHTML. I had to set the header info in PHP on the files I was loading to force a reload every time. Otherwise it was loading a cached version (which wasn’t up to date and didn’t show the latest data). Once I made those header changes, it worked fine and reloaded it anew each time I made the request.
Ok, I reread the post and realize that you’re talking about only images. Please note however that it applies only to images! Not to source code! It *does* cache source code.
I faced the same problem with Google Web Accelerator stopped. But after starting Google Web Accelerator, I was unable to recreate the bug.
See the Microsoft link below for a better solution!
Adding this to apache config will fix this bug.
LoadModule headers_module modules/mod_headers.so
Header add Cache-Control “public, max-age=3600, post-check=3600, pre-check=3600″
This also works with IIS (different syntax)