本地JavaScript頁面加載消息？

我想一個網頁阻止/加載腳本，將覆蓋整個頁面，並顯示「正在加載...」消息，而所有資產裝入，以避免無樣式內容閃爍等本地JavaScript頁面加載消息？

我基本上想要類似jQuery's BlockUI的頁面阻止方法：$.blockUI();，但我希望它在原生JavaScript，所以我不必等待jQuery加載（我正在通過RequireJS加載我的腳本，所以當我的代碼塊執行時，我已經爲我的應用程序下載了許多其他依賴項，並且我獲得了我試圖避免的無格式內容的閃光）。

任何人都知道原生javascript解決方案可能適用於我，我可以在我的RequireJS調用之前將它作爲阻塞（在資產加載方面）腳本插入？

來源

2011-05-07 neezer

除了使用JavaScript加載阻塞UI，您可以放置一些簡單的標記，顯示您想要的任何「加載...」UI，然後在加載完所有內容後使用Javascript將其替換爲真實的UI。即使是一個簡單的解決方案，例如擁有兩個div，一個包含加載用戶界面並設置爲「display：block;」，另一個包含頁面UI並設置爲「display：none;」，然後是一些基本JavaScript來切換每一個頁面加載應該可以做到。 – aroth 2011-05-07 14:44:08

非常好指出！我根據您所建議的內容「display：none」更新了我的答案。 – 2011-05-07 15:01:02

您可以將您的代碼與DIV浮動在頁面上。

<div id="loading"> 
    Loading! Please calm down guy... 
<div>

這個DIV可以顯示已風格是position: absolute，width: 100%和height: 100%。這個CSS可以是內聯的，然後它將被應用而不需要其他文件下載。或者像@aroth評論的那樣，您可以將DIV設置爲display: block，並將您的頁面內容設置爲display: none。

然後，只需用你的代碼（近</body>）的最後一個簡單的JavaScript隱藏：

<script type="text/javascript"> 
    document.getElementById("loading").style.display = "none"; 
    document.getElementById("content").style.display = "block"; 
</script>

此腳本將所有其他元素被加載後才能執行。

最後，我把這個代碼here as sample。

來源

2011-05-07 14:42:10

謝謝，這正是我想要的！ – neezer 2011-05-07 15:04:43

嗯，看起來我的頁面內容比窗口更長，在顯示我的加載消息時留給我滾動條。無論如何擺脫這些？ – neezer 2011-05-07 15:27:28

Aph，只是想出了自己：'html {overflow：hidden; }'。我的應用程序是單窗口應用程序，因此我不需要它滾動內容，但是當加載消息再次隱藏時，您可以輕鬆地反轉CSS。 – neezer 2011-05-07 15:31:53

我的建議是使用HTML和CSS在中間設置一個加載消息的掩碼。然後讓JavaScript在頁面完全加載後刪除掩碼並加載消息。

來源

2011-05-07 14:40:49 Zoidberg

本地JavaScript頁面加載消息？

回答

相關問題