工作燈加載指示燈

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信息，並且在第一次加載和后續加載中，一切似乎都一致。

---

在這里進行了一些討論之后，我回到嘗試使用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;
}