Monday, August 29th, 2005

Internet Explorer and Ajax image caching woes

Category: IE, Ruby

>Thomas Fuchs (script.aculo.us / Rails fame) talks of his 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 img tags 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=86400

is 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-age has 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:

Posted by Dion Almaer at 3:46 am
5 Comments

++++-
4.2 rating from 19 votes

5 Comments »

Comments feed

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.

Comment by Hans Mast — August 30, 2005

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.

Comment by Hans Mast — August 30, 2005

I faced the same problem with Google Web Accelerator stopped. But after starting Google Web Accelerator, I was unable to recreate the bug.

Comment by Apoorv Shrivastava — January 11, 2006

See the Microsoft link below for a better solution!

Comment by Apoorv Shrivastava — January 12, 2006

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)

Comment by Fred — August 31, 2006

Leave a comment

You must be logged in to post a comment.