Microsoft AlphaImageLoader crashing IE 6

I’ve been developing a website for a local group that supports the arts (www.scera.org). The client called my place of work and mentioned that some of their users were having difficulties with IE 6 locking up. After spending several hours on the issue, I discovered that Microsoft has a bug, that causes the filter to no work properly when the images are preloaded. So to fix this issue I had to do the following:

First of I commented out all of the normal filter lines and replaced them with this

<!–[if IE]>
<style>
.top-content {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/content-top.png”, sizingMethod=”scale”);*/
}
.logo {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/scera-logo.png”, sizingMethod=”scale”);*/
}
.mdle-content {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/content-bg.png”, sizingMethod=”scale”);*/
}
.btm-content {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/content-btm.png”, sizingMethod=”scale”);*/
}
.side-nav-bg {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/side-nav-bg.png”, sizingMethod=”scale”);*/
}
.tickets {
background-image: none;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/img/tickets.png”, sizingMethod=”scale”);*/
}

</style>
<![endif]–>

Once I had done that, I wrote a pre-loader and called it in the <body onload=”genesis()”> of the website. The following is the code from the pre-loader:

<script type=”text/javascript”>
function vIE(){return (navigator.appName==’Microsoft Internet Explorer’)?parseFloat((new RegExp(“MSIE ([0-9]{1,}[.0-9]{0,})”)).exec(navigator.userAgent)[1]):-1;}

function genesis() {
if (vIE() < 7 && vIE() > 0) {
var divs = document.getElementsByTagName(‘img’);
for (i = 0; i < divs.length; i++) {
var im = new Image;
im.src = divs[i].src;
}
document.getElementById(‘top-content’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/content-top.png’, sizingMethod=’scale’
)”;
document.getElementById(‘logo’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/scera-logo.png’, sizingMethod=’scale’)
“;
document.getElementById(‘mdle-content’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/content-bg.png’, sizingMethod=’scale’
)”;
document.getElementById(‘btm-content’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/content-btm.png’, sizingMethod=’scale’
)”;
document.getElementById(‘side-nav-bg’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/side-nav-bg.png’, sizingMethod=’scale’
)”;
document.getElementById(‘tickets’).style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/tickets.png’, sizingMethod=’scale’)”;
}
}

</script>

It isn’t the cleanest solution in the world, but it works (even if it is a little slow) granted, we ended up deciding that this solution was not the right one (needed to be faster when loading) so we changed it around a little, and now IE 6 uses get gifs rather than pngs.

Leave a Reply


Switch to our mobile site