Question

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

Loader Code（按请求）：请注意，由于代码库很大，很难解释，但这似乎可以解决这个难题。

<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中的前几帧。

Answer 1

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

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

Answer 3

这是IE中动画GIF的错误。从动画gif更改为使用javascript动画加载器的东西......（例如通过交换图像或类似物）

Internet Explorer，加载栏，5.57MB页面

3 个答案: