innerHTML causes IE6 to (permanantly) lock up

Question

On a site I am working on I load up a series of images which can be animated using some controls I implemented w/javascript. Everything works just fine in all browsers but IE6 which locks up and never recovers; at least not w/in the 15min I let it sit there.

The part it is choking on is a portion where I try to modified the contents of a particular div.

Before problem:

<div id='animation_image'></div>

After problem:

<div id="animation_image">  
  <div id="daily_loop_image_13" class="loop_image">
    <img name="animation" src="/path/to/image/13/20100119/world_14.gif" 
      class="hiddenElements" border="0">
    </div> 
  <div id="daily_loop_image_12" class="loop_image">
    <img name="animation" src="/path/to/image/12/20100119/world_13.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_11" class="loop_image">
    <img name="animation" src="/path/to/image/11/20100119/world_12.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_10" class="loop_image">
    <img name="animation" src="/path/to/image/10/20100119/world_11.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_9" class="loop_image">
    <img name="animation" src="/path/to/image/9/20100119/world_10.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_8" class="loop_image">
    <img name="animation" src="/path/to/image/8/20100119/world_9.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_7" class="loop_image">
    <img name="animation" src="/path/to/image/7/20100119/world_8.gif" 
      class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_6" class="loop_image">
    <img name="animation" src="/path/to/image/6/20100119/world_7.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_5" class="loop_image">
    <img name="animation" src="/path/to/image/5/20100119/world_6.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_3" class="loop_image">
    <img name="animation" src="/path/to/image/3/20100119/world_4.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_2" class="loop_image">
    <img name="animation" src="/path/to/image/2/20100119/world_3.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/image/1/20100119/world_2.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="daily_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/image/0/20100119/world_1.gif" 
        class="" border="0">
  </div> 
  <div id="weekly_loop_image_1" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/1/20100119/world_wk2max.gif" 
        class="hiddenElements" border="0">
  </div> 
  <div id="weekly_loop_image_0" class="loop_image">
    <img name="animation" src="/path/to/weeklyImage/0/20100119/world_wk1max.gif" 
        class="hiddenElements" border="0">
  </div>
</div>

I've tried:

• storing all the elements w/in animation_image as a string and setting that to be the innerHTML
• creating empty/placeholder divs w/in animation_image and populating them individually
• using appendChild instead of innerHTML
• adding another div under "animation_image" and putting all the images/divs in there using the 3 methods above this

None of it seems to work in IE6 - all methods work just fine in FF3.0+, IE7+, Chrome 2+, etc. If I exit the javascript prior to the innerHTML it works just fine but if I even try to populating a single div (within animation_image) via the method in the 2nd bullet point, it locks up and never recovers.

I'm sure I left something out but I am totally freaking out ATM. Thanks in advance.

Update: Here is a link to the javascript along w/sample XML (http://pastebin.com/m5b426a67)

Answer 1

Another option might be to use a sprite. Collect all of the disparate images into a single file and position the large image appropriately in the divs using CSS background properties (position, repeat, etc.) I'm not sure how large your individual files are, but this might work for you.

There are many links on the internet for how to do this, but here is one.

Answer 2

There's nothing that jumps out immediately.

First thing I'd do is try the script standalone: Literally create a blank HTML page with only this script on it. If it works, it's likely that some other bit of script is causing the problem.

If it still breaks, try simplifying the script. Try stripping back the output you're putting in animHTML, e.g try it without all the attributes. Maybe alert (or otherwise output) animHMTL to see if there's anything obvious in there that'd break IE? Perhaps a weird/badly encoded character in the XML?

Answer 3

I have a similar problem earlier and fixed it by setting a timeout on the innerHTML method. I am not pretty sure whether it applies here or not, but I would say just give it a try.

Answer 4

This problem is one I've seen a few times. In IE, there seems (to me anyway) to be a bug when setting the innerHTML property with something that contains external resources (an image, a script, etc).

You are adding a few img tags. Each one could cause this problem. Here is what I recommend:

Instead of building this html and setting the innerHTML property

var html = '<div id="daily_loop_image_4" class="loop_image">
    <img name="animation" src="/path/to/image/4/20100119/world_5.gif"
         class="hiddenElements" border="0">
</div>';
outerDiv.innerHTML = html;

Run this script to add the html:

var div = document.createElement('div');
div.id = 'daily_loop_image_4';
div.className = 'loop_image';

var img = document.createElement('img');
img.name = 'animation';
img.src = '/path/to/image/4/20100119/world_5.gif';
img.className = 'hiddenElements';
img.border = 0; //Shouldn't this be done in css?

div.appendChild(img);
outerDiv.appendChild(div);

Answer 5

I may have missed this as I only glanced over the code but any DOM manipulation has to be done after DOM Ready, especially in IE6. Have you tried this?

$(document).ready(function(){
 $('#animation_image').html(animHTML);
});

If you have tried this then I'll look into this further.

Answer 6

Not quite sure how I missed this in my days and days of googling but it looks like the issue is related to the AlphaImageLoader "fix" for dealing w/transparent PNGs. The article I found gets into more detail about the underlying issue:

http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

When I removed the entry in png_fix.css the page - in its original form - loaded flawlessly in IE6. Now I just need to go and try to convert all the (transparent) pngs to gifs which might not be a feasible solution either.

I really appreciate everyone's help and I apologize for any wild goose chases I sent people on. Thank you all VERY VERY much.

Answer 7

If nothing else works, you can use a try...catch statement and display a friendly error message if the try is caught.