javascript - 工作灯负载指示器

Question

我们的应用程序加载过程很长，因此为了向用户表明应用程序正在运行并且只是加载，我们希望提供一个加载/初始化指示器。我尝试使用 WL 的繁忙指示器，但它的可用性似乎在应用程序生命周期的早期还没有完成。所以我刚刚在我们的单页应用程序中创建了一个带有加载指示的简单 DIV。应用程序完成加载后，我将其隐藏。当我第一次运行该应用程序时它工作正常。 future 的运行行为会有所不同。

首次运行:立即显示，并在应用完成初始化后隐藏。
后续运行:它不会出现在第一次演示中，而是在应用完成初始化并开始正常流程之前快速闪烁。

加载 DIV(我将其完全静态化，不依赖于任何 JS 或 CSS):

    <div id="loadingInd"
         style="z-index:1;position:absolute;left:85px;top:185px;display:block;">
         Loading2...
    </div>

隐藏代码:

    $('#loadingInd').hide()

有关加载过程的一些信息:

我们预加载应用程序使用的所有 JS 和 HTML 文件。一项将此更改为更延迟加载过程的任务正在进行中，但尚未将优先级列表移到足够高的位置以完成。一旦加载了所有 JS 和 HTML 文件，我们就会显示 UI 小部件(菜单、登录按钮等)。在加载完成之前，我们只有一个加载启动画面。所以 loadingInd DIV 只是启动画面中的静态内容。我不明白的是，为什么它会在应用程序首次运行时立即与启动画面的其余部分一起显示，但在随后的运行中直到很晚才出现。我认为它看起来闪烁的原因是因为它是在调用 hide() 之前绘制的。后续运行是否有可能导致这种不同的绘图行为？我在初始化过程中的多个位置记录了 CSS 信息，并且在第一次加载和后续加载之间一切似乎都是一致的。

---

在这里进行一些讨论后，我又回到尝试 busyIndi​​cator。我在开始加载所有内容之前显示它，并在准备开始加载小部件时隐藏它。它的行为就像上面的 DIV 一样。我在想这幅画出了什么问题。

Answer 1

我在我的网站上使用了它，编辑:这里是一个工作 jsfiddle 的链接:http://jsfiddle.net/sYghV/4/

$(window).load(function() {
$("#pageLoadingMessage").fadeTo("fast", 0, function() {
      document.getElementById("pageLoadingMessage").style.zIndex="-100";
    });
});

html:

<div id="pageLoadingMessage"> 
<p style="top: 50%; position: absolute; left: 50%;">
<img src="http://sierrafire.cr.usgs.gov/images/loading.gif" style="width: 24px; height: 24px;">
</p> 
</div>

CSS:

#pageLoadingMessage {
background-color: gray;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
text-align: center;
vertical-align: bottom;
}