如何在asp.net中加載頁面時添加Ajax加載器？

Question

我想在加載具有透明背景的頁面時使用ajax加載器。 我嘗試了下面的代碼，顯示加載圖像，但如何覆蓋整個背景文本作為transperent。 我的代碼是：

<div class="UpdateProgress1">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
    <img src="image/ajax-loader.gif"  /> Loading ...
</ProgressTemplate>
</asp:UpdateProgress>
</div>

我的css是：

.UpdateProgress1 {
 color:#fff;
 position:fixed;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 vertical-align: middle;
 text-align: center;
 background-color: #000;
 float: left;
 top:18%;
 left:13%;
 width:73%; 
 }

如果有人知道任何鏈接或任何解決方案，請告訴我。 並在上面的CSS中，如果我添加高度屬性，圖像將在頁面加載時顯示，而不會發生單擊事件。 謝謝。

Answer 1

為了澄清，您要嘗試執行以下哪項操作：

1）加載頁面，當用戶調用回發時，在等待回發時顯示加載器。 2）在實際加載的頁面開頭顯示加載器。

從描述中，它聽起來像后者。 如果是這樣，這是一種非常罕見的方法。 根據頁面內容，可能很難知道它何時真正“完成加載”。 對於HTML / Javascript設置，您最好的選擇可能是：

  $(document).ready(function() {
    // code to hide the loader animation
  });

（請注意，如果您還沒有jQuery，則需要jQuery。）

如果您的內容因其他原因而延遲，例如等待加載的腳本執行某些操作或等待瀏覽器插件（例如Flash），則事情會變得復雜得多。

Answer 2

您的HTML中似乎有拼寫錯誤：

<div id="wrappe">
---- Whole code goes here ----
</div>

這應該被稱為“包裝器”。

您的JavaScript引發錯誤，因為document.getElementById("wrapper")返回null，它沒有屬性樣式。

您正在測試哪種瀏覽器？ 你應該在IE窗口的左下方看到一個小黃色警告圖標，它會給你一些線索錯誤的線索。

網頁錯誤詳情

消息：需要對象
行：34
查爾：13
代碼：0
URI： http：// localhost：64888 / ImageTest.aspx

如果您使用的是Firefox，請自行獲取開發人員工具欄的副本，它會為您提供一個漂亮的紅色感嘆號以及來自JavaScript的確切錯誤：

錯誤：document.getElementById（“wrapper”）為null
源文件： http：// localhost：64888 / ImageTest.aspx
行：34

Answer 3

使用具有更高z-index的Iframe來阻止主頁面。

<iframe id="blockPage" src="about:blank" style="display: none; position: absolute;
        z-index: 10; filter: Alpha(Opacity=40) DropShadow(Color=#454545);"></iframe>

使用以下功能顯示和隱藏框架

function BlockPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null != ifrm)
    {
        ifrm.style.display = "block";
        ifrm.style.top = 0;
        ifrm.style.left =0;
        ifrm.style.width=screen.availWidth;
        ifrm.style.height = screen.availHeight; 
    }
}

function ShowPageContent()
{
    var ifrm = document.getElementById("blockPage");
    if(null!= ifrm && ifrm.style.display != "none")
    {
        ifrm.style.display = "none";
    }
}

並以下列方式調用上述函數。

在“EndizeRequest”中調用BlockPageContent，在“EndRequest”中調用ShowPageContent。 “InitializeRequest”和“EndRequest”是PageRequestManager對象的事件處理程序。