Internet Explorer，加载条，5.57MB页面

Question

Internet Explorer，加载条，5.57MB页面

3

我有一个比较独特的问题。有一个Web应用程序，需要加载5.57MB。我想在其中加入一个Loading Bar或Ajax Spinner，以便在大约10-20秒的加载时间内向用户呈现进度条动画。其中包含了许多图片和JS。问题在于，Firefox可以正确地对所有内容进行线程处理，因此动画GIF可以持续运行。一切都很顺利。但是IE只会加载旋转器的前几帧，然后就会卡住，直到网站完全加载完成。而且，当未缓存时，它还会锁定浏览器。它会在加载完成后显示页面，但不管是缓存还是未缓存，旋转器都会在第一帧停止。这种情况在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仍然只显示前几帧。

- user192230

1

你能提供生成加载器的代码吗？ - meder omuraliev

如果你能在IE 7或8中测试并且它可以正常工作（很有可能在8中可以正常工作），那么就不用再担心了。我早就不再关注IE 6及以下版本的用户了。 - DV.

我已经在主问题中添加了代码。参考资料，我正在使用所有三个IE版本，它在IE 7和*中也可以演示。 - user192230

和你的问题无关，但请注意 style.visibility = "hidden" 只会隐藏内容，但保留它所占据的空间为页面上的空白区域。而将 style.display = "none" 设置后，将会完全移除元素，就好像它从未存在过一样。 - awe

实际上，我最初使用了display = 'none'，但在论坛帖子的建议下进行了更改，该帖子提到动画gif在加载时不可见，可能会导致问题。对于这个用户来说，使用visibility而不是display解决了问题。然而，它对我的代码没有任何影响。我在这里使用绝对定位，因为即使可见，它也必须覆盖整个内容。谢谢你 :) - user192230

显示剩余3条评论

3个回答

0

你可以在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>

- awe

另一个好的、有趣的答案。也许可以这样做。感谢你的敬畏。 - user192230

结果发现在同时进行道场预加载函数和JavaScript加载（解析一个200kB的XML规则文件）时，导致图像无法旋转。我使用了你的部分解决方案，但是回到了只使用道场的解决方案，只有JavaScript后加载缓存的JSON版本作为XML规则文件解析结果，因为在IE中逐个加载每个图像文件需要太长时间。Firefox仍然尝试加载所有内容，并在所有内容加载完成之前显示主UI，但这没关系。谢谢:D - user192230

0

这是IE中动态GIF的一个bug。将动态GIF更改为使用JavaScript来动画加载器（例如通过交换图像或类似方式）。

- KristoferA

如果这也适用于未缓存的加载，我会让你知道的。我猜它不会，但我们会看到 :) 一个问题，多个答案。我喜欢得到有创意有用的答案。谢谢KristoferA。 - user192230

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tzury Bar Yochay · Accepted Answer

尝试将此图像放入 iframe 中。这是 Gmail 开发人员在以前版本中使用的红色“正在加载...”标签。