View Full Version : IE6 Image Flickering in Components

21 Feb 2007, 8:33 PM
I'm seeing a lot of image downloads in the TreePanel demo, and in general flickering here and there.

This can be fixed as a two-parter.
1. Static background image cache function.
- anonymous function that executes on page load and caches all "static html" css calls.
2. Dynamically-written background image cache function.
- invoked function that writes empty divs to the html page to cache css classes which are not "concrete html" at page serve time.

Between the two, as long as they are invoked prior to dynamically writing html/css, should cache all IE6 images. I've noticed the second function also helped image reloading for my Opera 9.01.

Part 1

// Can be placed anywhere
// Credit to Hedgerwow

/*Use Object Detection to detect IE6*/
var m = document.uniqueID /*IE*/
&& document.compatMode /*>=IE6*/
&& !window.XMLHttpRequest /*<=IE6*/
&& document.execCommand;

m("BackgroundImageCache", false, true) /* = IE6 only */


Part 2

//this can obviously be prettied up, made into an object, and a little more browser specific.
//credit to me! :)
<script type="text/javascript">
// i'd put this next to the javascript modules which are using it.
cacheCss(["classNameHere", "className2", "etc"]);

// library
function _cacheIE(className) {
document.write('<div class=\"' + className + '\" style="display : none"></div>');
function _cacheOther(className) {
document.write('<div class=\"' + className + '\" style="height : 0px"></div>');

function _chooseCacherFn() {
return (window.ActiveXObject) ? _cacheIE : _cacheOther;

function _doCache(fn, els) {
if (!els) return;
var arr = (!els.length) ? [els] : els;
for (var i = 0; i < arr.length; i++) {

function cacheCss(cssClasses) {
_doCache(_chooseCacherFn(), cssClasses);