Internet Explorer，加载栏，5.57MB 页面答案

【问题标题】：Internet Explorer, Loading Bar, 5.57MB pageInternet Explorer，加载栏，5.57MB 页面
【发布时间】：2009-10-19 16:02:43
【问题描述】：

我有一个独特的问题。有一个 Web 应用程序需要 5.57mbs 的加载。我想要一个加载栏或 Ajax Spinner 来进行动画处理，以便他们知道在大约 10-20 秒的加载时间内事情正在进展。大多数是图像，这里也有很多 JS。这里的问题是，Firefox 正确地线程化了所有内容，因此动画 gif 一直在旋转。动画。世界是幸福的。然而，IE 会加载微调器的前几帧，然后口吃提前停止，并且在站点完全加载之前它不会做任何事情。它还将浏览器锁定在未缓存的负载上。然后它会在加载完成后显示页面，但是无论是缓存还是未缓存，微调器都会在第一帧期间停止。（缓存的加载时间仅为~2-3 秒）同样，它不会发生在 Firefox、Safari 或除 IE 之外的现代浏览器中。有没有办法很好地加载 IE？研究还没有得出任何结论。

加载器代码（按请求）：请注意，由于代码库很大，很难解释，但这似乎抓住了两难境地。

<script type="text/javascript">
    function show_main_gui() {
        dojo.byId("splashloader").style.visibility = "hidden";
    }
    function init(){
     show_main_gui();
    }
    dojo.addOnLoad(init);
</script>
<style type="text/css">
#splashloader {
 position:absolute;
 z-index:999;
 width:800px;
 visibility:visible;
 height:600px;
 background:#fff;
 text-align:center;
 color:#1E4FD9;
}
</style>

<table id="splashloader"><tr><td><img src="images/interface/splashloader.gif"><span class="loader"> Loading...</span></td></tr></table>

一个表格...因为它在所有浏览器中更容易垂直对齐。

IE 8 和 7 仍然坚持加载 gif 动画冻结。如果我将微调器更改为在加载后显示，动画就会动画。我尝试取出除此之外的所有 JavaScript 调用，并在缓存中加载，但在 1-2 秒加载期间，它仍然只显示 IE 中的前几帧。

【问题讨论】：

能否提供生成loader的代码？
我会说如果你可以在 IE 7 或 8 中测试它并且它可以工作（很有可能它可能在 8 中工作）然后忘记它。我早就不再担心 IE 6 及以下用户了。
我在上面的主要问题中添加了代码。对于 ref，我正在使用所有三个 IE 版本，它也在 IE 7 和 * 中进行了演示。
与您的问题无关，但请注意style.visibility = "hidden" 只会隐藏内容，但会将其占用的区域保留为页面上的空白部分。设置style.display = "none" 也会删除它占据的位置，就好像它根本不存在一样。
实际上我一开始使用了 display = 'none' 但在论坛帖子的建议下更改了它关于动画 gif 在加载时不可见可能会导致问题。使用可见性与显示为该用户修复了它。但是，它对我的代码的影响为零。我在这里使用绝对位置，因为即使可见，它也必须覆盖整个区域。谢谢你:)

标签： javascript internet-explorer animated-gif

【解决方案1】：

尝试将此图片放在 iframe 中。这就是 gmail 开发人员在以前版本中使用红色“正在加载...”标签所做的事情

【讨论】：

有趣，我曾考虑过它，但当我在非缓存加载期间看到它也锁定了其他浏览器选项卡时，我就忽略了它。但是有可能..我明天会报告我的结果。谢谢 Tzury。

【解决方案2】：

您可以在 javascript 中动态加载内容，并使用您喜欢的技术来更新状态/进度。最简单的可能是使用浏览器状态文本，但您当然也可以使用页面上的区域来显示动画和/或状态。

<script id="postLoadJavascript" type="text/javascript" ></script>

<script type="text/javascript">
  var imagesLoaded = 0;
  var totalImages = 100;
  for(imagesLoaded = 0; imagesLoaded < totalImages; imagesLoaded++){
    window.status = 'Loading image ' + imagesLoaded + ' of ' totalImages + '...';
    document.write('<img src="image' + imagesLoaded  +'.gif" /> ');
  }
  window.status = 'Loading additional javascript...';
  document.getElementById('postLoadJavascript').src = "theAdditionalJavascript.js"
  window.status = 'Finished loading all.';

</script>

【讨论】：

另一个很好的、有趣的答案。它可能归结为这样做。谢谢你的敬畏。
原来 dojo 预加载功能和同时进行 javascript 加载（解析 200kB xml 规则文件）导致图像不旋转。我使用了您的解决方案的一部分，但又回到了使用 dojo 的方法，其中只有 javascript 后加载缓存的 JSON 版本的 xml 规则文件解析结果，因为在 IE 中一个一个地加载每个图像文件花费了太长时间。 Firefox 仍然尝试加载所有内容并在所有内容加载之前显示主 UI，但这没关系。谢谢：D

【解决方案3】：

这是 IE 中动画 gif 的一个错误。从动画 gif 更改为使用 javascript 为加载程序设置动画...（例如通过交换图像或类似方式）

【讨论】：

我会告诉你这是否也适用于未缓存的负载。我猜它不会，但我们会看到:) 一个问题，几个答案。我喜欢获得创造性的有用答案。谢谢 KristoferA。