J. Cornelius

Solving IE Image Flicker

October 10, 2004

Using classic FIR or similar Image replacement techniques is fabulous except that IE doesn't follow the rules on image caching and CSS. Here's how to configure your server to force IE to behave.Thanks to Dean Edwards and Ryan Carver for figuring this out. It took me a while to find the two pages linked above so I've included this here for fast reference. Here's a lightweight overview:

Flickering or Blinking Images in IE (and only IE) are caused by setting the cache preference to "Every Visit to the Page" in your Internet Options. This is not the default, but nevertheless some people prefer to have it this way.

What happens is IE thinks it has to load the replaced image every time your mouse hovers on or off of the space the image occupies. This forces another request for the image from the server and causes it to flicker or blink while a fresh copy of the image is being downloaded.

Putting the cache preference back to the default setting "Automatically" will end the flickering.

This is a client side issue, but we can fix it on the server by using the Apache mod_expires module.

You can go at this one of two ways: in your httpd.conf file at either the server or virtual server level, or if you don't have access to the Apache server configuration you can do everything in an .htaccess file.

The actual work is done with this bit of magic:

ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000

This has the server send expiration headers with the .GIF, .JPG, and .PNG mime types that tell the browser to keep those images in cache. In essence, you've just told IE to look at it's cache instead of your Website for all images it has already loaded for one month after the initial request.

I recommend doing this as follows:

  1. Make sure that your Apache configuration has the mod_expires module loaded. If you can't access your Apache config, ask your Webhost or server admin for help. It should appear in the httpd.conf file like this: LoadModule expires_module modules/mod_expires.so
  2. Add these lines to your .htaccess file in the root dorectory of your Website: ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000
  3. That's all it takes! ... enjoy.

Was it good for you?

Post to Digg Post to del.icio.us Post to ma.gnolia Post to Furl Post to Mixx

Tags

apache, design, ie, standards

About

J Cornelius is a software developer, Web developer, and Formula 1 fan in Atlanta GA. He has a strange affinity for odd numbers, european sports cars, thoughtful analogies, and is hopelessly addicted to chips & salsa. Read more

Recent Articles