pngs slowing down IE

firefox is fine and there are no errors

[cuce]

hello, I've built a site and there are a few transparent png images.
I used a behavior (.htc) to change the code to accomodate the pngs in IE. Everything is outputting how it should but for some reason, The page slows down like crazy in IE.I have a suspiscion that it might have something to do with my javascript for the pngs conflicting with the manual scroller js but I can't figure out for the life of me why.

here's my code:

[b]//this bit goes before the content for the scroller[/b]
var speed=8;
newschool=document.all¦¦document.getElementById
document.write('<div id="mscrollercontain" style="position:relative;height:518px;width:416px;overflow:hidden;">')
document.write('<div id="mscrollercontent" style="position:absolute;left:0px;top:0px;padding:10px;">')
[b]//this bit goes after[/b]
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("mscrollercontent") : document.all.content
var contentheight=crossobj.offsetHeight
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (newschool&&parseInt(crossobj.style.top)>=(contentheight*(-1)+300))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (crossobj.top>=(contentheight*(-1)+50))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if(crossobj.style.top!=0+"px")
{
if (window.movedownvar) clearTimeout(movedownvar);
if (newschool&&parseInt(crossobj.style.top)<=0);
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px";
moveupvar=setTimeout("moveup()",20);
}
}
function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar);
if (window.movedownvar) clearTimeout(movedownvar);
}
function movetop(){
stopscroll()
crossobj.style.top=0+"px"
}
function getcontent_height(){
contentheight=crossobj.offsetHeight
}
[b]//this bit is the ie behavior for png transparency[/b]
<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>
var supported = /MSIE (5\.5)¦[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "/assets/shoppingcart-images/spacer.gif";
if (supported) fixImage();
function propertyChanged() {
  if (!supported) return;
  var pName = event.propertyName;
  if (pName!= "src") return;
  // if not set to blank
  if (! new RegExp(blankSrc).test(src))
   fixImage();
};
function fixImage() {
  // get src
  var src = element.src;
  // check for real change
  if (src == realSrc) {
   element.src = blankSrc;
   return;
  }
  if (! new RegExp(blankSrc).test(src)) {
   // backup old src
   realSrc = src;
  }
  // test for png
  if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
   // set blank image
   element.src = blankSrc;
   // set filter
   element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                   src + "',sizingMethod='scale')";
  }
  else {
   // remove filter
   element.runtimeStyle.filter = "";
  }
}
</script>
</public:component>

[cuce]

I'd also like to add that I have used this scroller code before by itself, and it works fine but when I mix it with the png switcher it slows things down

[adni18]

That's because IE doesn't natively support PNGs. Even with the HTC, you're still faking it. IE has to redraw all the pixels to make them transparent, which is why it is so slow.

[oxbaker]

ya, get rid of the pngs altoghether, they are way to heavy. Use Transparent .gifs if you need too.

hth,
mcm

[whoisgregg]

I have pages with transparent PNGs with file sizes of up to 90KB with no slow downs (except the obvious need to download that large of a file). Although the other comments about IE needing to fake it and go through pixel by pixel are accurate, you shouldn't expect that to cause a dramatic slowdown.

Personally, I use the koivi.com PHP script [koivi.com] to handle alpha transparent PNGs. I have no association with koivi.com, it's just the best way I've found so far.