6

在我正在开发的网站上，我加载了一系列图像，这些图像可以使用我用 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 的 javascript 链接（http://pastebin.com/m5b426a67）

4

7 回答 7

1

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

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

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

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

于 2010-01-26T16:02:51.960 回答
0

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

互联网上有很多关于如何做到这一点的链接，但这里有一个。

于 2010-01-19T16:38:38.353 回答
0

没有什么可以立即跳出来。

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

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

于 2010-01-19T17:00:40.923 回答
0

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

于 2010-01-25T19:27:53.700 回答
0

这个问题我见过几次。在 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);
于 2010-01-25T20:47:08.450 回答
0

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

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

如果您已经尝试过，那么我会进一步研究。

于 2010-01-25T23:20:20.983 回答
0

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

于 2010-01-26T16:15:57.873 回答