2

我们的应用程序加载过程很长，因此为了向用户提供应用程序正在运行且仅在加载的指示，我们希望提供一个加载/初始化指示器。我尝试使用 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() 之前绘制的。后续运行是否有可能导致这种不同的绘图行为？我'

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

4

1 回答 1

0

我在我的网站上使用了这个，编辑：这是一个工作 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;
}
于 2013-08-18T18:01:20.760 回答