Question

我们的应用程序加载过程很漫长，因此为了向用户提供应用程序正常运行且仅仅加载的指示，我们希望提供加载/初始化指示符。我尝试使用WL的繁忙指标，但在应用程序生命周期的早期，它的可用性似乎并未完成。所以我只是在带有加载指示的单页面应用程序中创建了一个简单的DIV。一旦应用程序完成加载，我就隐藏它。我第一次运行应用程序时工作正常。未来的运行表现不同。

首次运行：它立即显示，并在应用完成初始化后隐藏 后续运行：它没有显示第一个演示文稿，并在应用完成初始化并开始正常流程之前快速闪烁。

加载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信息，并且在第一次和后续加载中一切似乎都是一致的。

经过一番讨论后，我又回去尝试busyIndicator了。我在开始加载所有内容之前展示它，并在我准备开始加载小部件时隐藏它。它的行为就像上面的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;
}

工作灯装载指示灯

1 个答案: