JavaScript Tips & Tricks

IE 6 re-downloading background images

In IE 6 background images tend to flicker or flash everytime the screen is updated or redrawn. This is because background images are not, by default, cached but re-requested from the server. Each time an image is used as a background in a page it is down rather than retrieve from cache. The download time is the cause of the flash.

The impact beside the annoying flash is a performance hit for all the downloads and, according to Microsoft, increased memory consumption.

This applies to:

• IE6.0 (not IE5.0/5.5 or IE7)
• CSS background-images that, either directly or indirectly, are affected by a dynamic effect
• The same background used multiple times; e.g. buttons or fancy trim.

There is a fix starting with IE 6 SP1. Add the following lines to the head section of the page. They turn on caching of background images—set on by default in IE7, and I think in IE 5.0 ans 5.5.

<!--[if IE 6]>
	<script type="text/javascript">
		try {
			document.execCommand("BackgroundImageCache", false, true);
		} catch (e) { }
	</script>
<![endif]-->

What Does This Do

Microsoft's proprietary conditional comments isolate the code for IE 6. This is valid code because it is in a comment. In IE 6, the JavaScript command to turn caching of background images on is run in an error trap. The try-catch block traps the error thrown by the few copies of IE 6 that have not been updated with SP1.