innerHTML 导致 IE 6（永久）锁定答案

【问题标题】：innerHTML causes IE6 to (permanantly) lock upinnerHTML 导致 IE 6（永久）锁定
【发布时间】：2011-01-06 21:22:08
【问题描述】：

在我正在开发的网站上，我加载了一系列图像，这些图像可以使用我用 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
使用动画图像创建空/占位符 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 链接

【问题讨论】：

发布 javascript。听起来你有一个只有 IE 会生成的无限循环。编辑：另外，您可能应该终止
我编辑了你的代码，因为没有人可以阅读它。
相关JS可以在这里找到：pastebin.com/m5b426a67我会相应地更新我的帖子。
感谢 KLE - 我尝试对其进行格式化，但遇到了代码块问题。
只是为了咯咯笑，我想看看使用 jQuery 加载函数是否会执行得更好 - 就动画图像中的 HTML 而言，最终结果与使用我的 javascript 解析例程生成的结果相同.我加载的 HTML 文件有我想要在我的站点中显示的 div 和 img 标签，没有其他任何东西，而且这个过程仍然慢得令人不安。我只是把它归结为 IE6 烂片还是我仍然做错了什么？

标签： javascript html internet-explorer-6 innerhtml

【解决方案1】：

不太清楚我在谷歌搜索的日子里是怎么错过的，但看起来这个问题与处理透明 PNG 的 AlphaImageLoader “修复”有关。我发现的文章更详细地介绍了潜在问题：

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

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

我真的很感谢大家的帮助，对于我派人进行的任何疯狂追逐，我深表歉意。非常非常感谢大家。

【讨论】：

【解决方案2】：

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

互联网上有很多关于如何做到这一点的链接，但是here is one。

【讨论】：

是的，考虑到我的图像大小，我不确定这最终会是最好的方法。不错的电话。
您可以尝试一个实验 - 使用精灵和较小的图像。如果它有效，您可能会更好地了解问题的根源。
嗯，我怀疑 IE6 可能会在内存中抛出 800x600 图像时遇到一些困难。它不是有史以来最快的浏览器...

【解决方案3】：

没有什么会立即跳出来。

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

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

【讨论】：

嗨，奥利，感谢您的反馈。我尝试尽可能地隔离它，但仍然遇到问题。 XML 似乎可以验证没有任何问题 - webdev 工具栏至少不会抱怨任何事情。我还尝试一次只更新 1 个 div，带有图像标签（总共 52 个字符），但它仍然存在同样的问题。我一定是在搞砸一些事情，但我这辈子都想不通。
就在 $('#animation_image').html(animHTML);添加类似 animHTML = "
Testing 123
";看看它是否仍然发生。或者尝试不带 img 标签。
效果很好。我还尝试在其中硬编码一个 div 包装的图像标签，效果很好。这让我大吃一惊，因为我已经换掉了包含 1000 多个字符的 div 和 span 元素，并且它在 IE6 中运行良好。废话。

【解决方案4】：

这个问题我见过几次。在 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);

【讨论】：

谢谢加布里埃尔，我将假设 img.src 规范发生了一些愚蠢的事情，它应该是这样的：img.src ="/path/to/image/4/20100119 /world_5.gif";对吗？
我实际上隐约记得以前尝试过这样的事情，但我还是继续使用它，它在我测试的所有浏览器（FF3+、IE7+、Chrome 3+、Opera 9.6+）中都能正常工作，但仍然挂起在 IE6 中。这整件事变得非常令人沮丧。如果我注释掉 outerDiv append 语句，事情会立即完成——我意识到加载图像需要一段时间，但它只加载
好吧，这里显然存在某种内存问题。如果我将整个系列 (14) 图像的图像路径硬编码为指向完全相同的 0.79KB 图像，它就可以工作。相同的 19.24KB 图像，它可以工作。同样的 34.75KB 图像，它失败了。如果我一直回到使用 FF1.5.0.6，一切都会立即加载。测试 PC 是 P-4 2.8GHz w/1Gb RAM。更让我生气的是，坐在那里 10 多分钟后，我试图杀死它，在确认我要结束应用程序后，它偶尔会显示加载了所有图像的页面，然后将其关闭半秒稍后。
是的。我修复了答案中的 img.src 错字。感谢您了解这一点。

【解决方案5】：

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

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

如果您尝试过，我会进一步调查。

【讨论】：

对不起，我应该提到我一开始就这样做了——处理 innerHTML 的函数在 $(document).ready 部分的末尾被调用。不过建议很好。

【解决方案6】：

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

【讨论】：

嗨，阿伦，感谢您的建议。不幸的是，我不确定这在这种情况下是否有效，因为浏览器完全锁定且无响应。

【解决方案7】：

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

【讨论】：

嗨 Teja，我试过了，但似乎没有用。您能否发布您所做的事情的 sn-p，以便我可以确认我正在做我应该做的事情。谢谢。