如何在加載數據時創建頁面覆蓋 - asp.net/jquery/blockui

Question

我正在嘗試顯示一個覆蓋，上面寫着“頁面加載......請等待”，同時從sql server恢復數據。 我希望為此使用BlockUI插件，但任何事情都可以。 我有一個使用site.master的ASP.NET頁面。 該插件可以工作，但無論我嘗試什么，它只會在頁面完全加載后出現。

大部分等待都是在Global.asax文件中完成的。 在Session_Start部分中，我有一個函數返回數據以填充頁面上的下拉菜單。 這需要大約20秒才能完成。

那么，在頁面完全加載之前，我需要做什么才能查看疊加層？ 感謝您的幫助或建議。

Answer 1

對於加載頁面，插件不會起作用

如果您希望在加載頁面之前阻止頁面， 內容攔截器元素應該是頁面的一部分，而不是由頁面加載后始終運行的任何插件生成。 在某個時間點或另一個時間點。

<body>
   ...
   <!-- make it last -->
   <div id="blocker">
       <div>Loading...</div>
   </div>
</body>

還有CSS做其余的事情

#blocker
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
}
    #blocker div
    {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5em;
        height: 2em;
        margin: -1em 0 0 -2.5em;
        color: #fff;
        font-weight: bold;
    }

和Javascript清除阻止：

$(function(){
    $("#blocker").hide();
});

這是使用上面代碼的工作示例。 它會在超時時刪除阻塞，因為它是一個如此簡單的文檔。

重要的提醒

但也許你不是以正確的方式理解這一點。 也許您想在發回服務器時阻止現有頁面，因為這是一個不同的故事。 在這種情況下，您的插件應該足夠，並應該在unload窗口事件和顯示阻止元素上運行。 這將阻止現有頁面在回發其數據時以及在瀏覽器開始接收新內容之前（可以使用先前顯示的技術阻止）。

似乎問題是瀏覽器在等待服務器響應

這很難分辨，因為你不能自己指出它。 但是假設問題是瀏覽器正在等待服務器響應。 當你提到會話加載很慢。 兩件事情：

優化數據庫調用以更快地獲取這些菜單數據（如果確實需要很長時間 - 您是否使用分析器進行了檢查？）
有一個靜態默認HTML頁面，顯示加載內容並執行重定向：
- 使用META刷新標簽 - 對於舊瀏覽器和沒有javascript的瀏覽器更安全
- javascript - 更好的現代頁面，特別是因為您的頁面使用Javascript（ __doPostback任何人）

看來你最好的選擇是兩者的結合。 但是一步一步，看看它是否更好。

還有一件事。 我知道等待第一個響應（應用程序啟動）需要一些時間。 它在許多頁面上都這樣做。 但是人們通常並不打擾，因為用戶不會對數據造成傷害，因為它仍然沒有顯示出來。 當您使用頁面的響應時間很長時會更糟糕，因為用戶傾向於多次單擊相同的按鈕（例如，創建/更新數據時）。 這更有害。

也許你把Asp.net應用程序啟動與你的會話加載混淆了。 當您首次啟動應用程序時，服務器響應需要更長的時間，因為它必須編譯您的應用程序並啟動它。 這可能需要相當長的時間。 有幾種解決方法可以包括對應用程序回收時間的更改以及單獨的心跳服務，這些服務會對應用程序提出微小的請求，以便在長時間不活動時保持活動狀態。

您還應該考慮到您的開發頁面是在台式機上運行的。 您應該知道您的服務器是否更快。

所以也許這不是會話創建，而是應用程序啟動。 您應該通過在瀏覽器中打開頁面並等待它完成來區分，然后關閉瀏覽器並再次打開它（以便創建新會話）並訪問您的應用程序。 如果它加載得更快，那么它不是你的會話的錯，而是.net框架必須編譯你的應用程序時啟動應用程序。

首先定義問題然后開始緩解 。

Answer 2

你可以用CSS做到這一點。 在所有事物之上創建一個絕對的div。 在該div中，您可以編寫“正在加載”消息。 頁面加載完成后，您可以使用javascript在該div上設置display：none。

如何在加載數據時創建頁面覆蓋 - asp.net/jquery/blockui

問題描述

2 個解決方案

解決方案1
12 已采納 2011-10-26 10:58:39

對於加載頁面，插件不會起作用

重要的提醒

似乎問題是瀏覽器在等待服務器響應

解決方案2
0 2011-10-26 11:00:42

如何在加載數據時創建頁面覆蓋 - asp.net/jquery/blockui

問題描述

2 個解決方案

解決方案1 12 已采納 2011-10-26 10:58:39

對於加載頁面，插件不會起作用

重要的提醒

似乎問題是瀏覽器在等待服務器響應

解決方案2 0 2011-10-26 11:00:42

解決方案1
12 已采納 2011-10-26 10:58:39

解決方案2
0 2011-10-26 11:00:42