Question

在我正在处理的网站上，我加载了一系列图像，这些图像可以使用我用javascript实现的一些控件进行动画处理。在所有浏览器中一切正常，但IE6锁定并且永远不会恢复;至少不是在15分钟内，我让它坐在那里。

它窒息的部分是我试图修改特定div的内容的部分。

问题出现之前：

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

问题出现后：

<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>

我试过了：

将animation_image中的所有元素作为字符串存储并将其设置为innerHTML
在animation_image中创建空/占位符div并单独填充
使用appendChild而不是innerHTML
在“animation_image”下添加另一个div并使用上面的3种方法将所有图像/ div放入其中

它们似乎都不适用于IE6 - 所有方法在FF3.0 +，IE7 +，Chrome 2+等都可以正常工作。如果我在innerHTML之前退出javascript它工作得很好但是如果我甚至尝试通过第二个项目符号点中的方法填充单个div（在animation_image中），它会锁定并且永远不会恢复。

我确定我遗漏了一些东西，但我完全吓坏了ATM。提前谢谢。

更新：以下是带有示例XML（http://pastebin.com/m5b426a67）

的javascript链接

Answer 1

我不太确定在谷歌的日子和日子里我是如何错过这一点的，但看起来这个问题与处理w /透明PNG的AlphaImageLoader“修复”有关。我发现的文章详细介绍了潜在的问题：

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

当我删除png_fix.css中的条目时，页面 - 以其原始形式 - 在IE6中完美加载。现在我只需要尝试将所有（透明）png转换为gif，这可能也不是一个可行的解决方案。

我非常感谢大家的帮助，并为我派人打过的任何疯狂的追逐道歉。非常感谢你们。

Answer 2

另一种选择可能是使用精灵。将所有不同的图像收集到一个文件中，并使用CSS背景属性（位置，重复等）将大图像正确放置在div中。我不确定您的单个文件有多大，但这可能对您有用。

互联网上有很多关于如何执行此操作的链接，但here is one。

Answer 3

没有任何东西可以立即跳出来。

我要做的第一件事是独立尝试脚本：直接创建一个空白的HTML页面，上面只有这个脚本。如果它有效，则可能是其他一些脚本导致了问题。

如果它仍然中断，请尝试简化脚本。尝试剥离你放在animHTML中的输出，例如尝试没有所有属性。也许alert（或以其他方式输出）animHMTL看看是否有任何明显的东西会破坏IE？也许是XML中一个奇怪/编码不好的字符？

Answer 4

我之前遇到过类似的问题，并通过在innerHTML方法上设置超时来修复它我不确定它是否适用于此，但我想说试试看。

Answer 5

这个问题是我见过的几次。在IE中，当使用包含外部资源（图像，脚本等）的东西设置innerHTML属性时，似乎（对我而言）是一个错误。

您正在添加一些img标签。每一个都可能导致这个问题。这是我的建议：

而不是构建此html并设置innerHTML属性

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;

运行此脚本以添加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 6

我可能错过了这个，因为我只浏览了代码，但任何DOM操作都必须在DOM Ready之后完成，特别是在IE6中。你试过这个吗？

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

如果你已经尝试了这个，那么我会进一步研究。

Answer 7

如果没有其他工作，您可以使用try ... catch语句，并在尝试捕获时显示友好的错误消息。

innerHTML导致IE6（永久）锁定

7 个答案: