工作灯负载指示器

Posted 2023-02-25

【中文标题】工作灯负载指示器

【英文标题】：Worklight Loading Indicator

【发布时间】：2013-08-06 15:10:52

【问题描述】：

我们的应用程序加载过程很长，因此为了向用户提供应用程序正在运行且仅在加载的指示，我们希望提供一个加载/初始化指示器。我尝试使用 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 信息，并且在第一次和后续加载之间一切似乎都是一致的。

---

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

【问题讨论】：

有些东西不见了...这是 Worklight WL.BusyIndi​​cator API？你在哪里初始化它？我认为如果你添加更多代码 sn-ps 会更有益......你在哪里调用它，你在哪里隐藏它，......

我尝试使用 WL.BusyIndi​​cator API，方法是在我的 initOptions.js 中对其进行初始化。 initOptions.js 是我的 HTML 文件中包含的第一个 JS 文件。除了分享我的整个应用程序之外，我不知道还有哪些其他代码 sn-ps 会被认为是相关的。如果你能相应地指导我，我当然可以分享一些东西。

根据我何时调用它以及何时隐藏它。我在进入 for 循环以加载所有 HTML 文件之前调用它，并在开始呈现我的 UI 小部件时隐藏它。据我所知，在我 show() 之后没有额外的 WL 负载。无论如何，我不再使用它了。我正在使用一个简单的 DIV，上面写着“正在加载”。

我不明白，你是在inioptions.js中初始化busyindicator？这应该在 wlcommoninit() AFAIK 中完成。

啊，我的错。它是。无论如何，我没有使用busyIndi​​cator。

【参考方案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;