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

我想在使用透明背景加載頁面時使用ajax加載器。我嘗試了下面的代碼來顯示加載圖像，但是如何覆蓋整個背景作爲transperent。我的代碼是：如何在asp.net中加載頁面時添加Ajax loader？

<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中，如果我添加圖片在頁面加載時顯示的高度屬性沒有單擊事件。謝謝。

來源

2010-06-24 Renu123

使用iframe具有較高Z -index阻止主頁面。

<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"; 
    } 
}

並調用上述功能在下面的方式。

在「InitialRequest」中調用BlockPageContent並在「EndRequest」中調用ShowPageContent。「InitializeRequest」和「EndRequest」是PageRequestManager對象的事件處理程序。

來源

2010-07-01 12:27:50 Subhasis

爲了澄清，下列哪些是你想怎麼辦：

1）加載一個網頁，當用戶調用後回，顯示加載在等待後回。 2）在實際加載的頁面開始處顯示加載器。

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

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

（請注意，你需要的jQuery這一點，如果你沒有它了。）

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

來源

2010-06-24 12:09:42 David

當用戶點擊特定頁面，然後我想要ajax加載器頁面加載頁面 – Renu123 2010-06-24 12:17:54

如果頁面上存在Ajax加載器，用戶正在瀏覽_from_，那麼一旦加載新頁面，應該消失（除非你有某種類型的框架設置或你的設計中的奇怪之處）。但是，如果它在頁面上，用戶正在導航_to_，那麼作爲一種不常見的方法，當文檔完成加載時，您可能不得不手動隱藏它。到目前爲止，我還沒有碰到一個比$（document）.ready（）更可靠的方法，正如我所說的，從用戶的角度來看，其可靠性取決於頁面內容。 – David 2010-06-24 12:29:07

$（document）.ready的問題在於，只要DOM被加載，但在所有外部內容（圖像，css等）到位之前它就會觸發，這與Renu123所要求的完全不同 - 這是爲了裝載程序只有在所有其他內容準備就緒後纔會消失。 – 2010-06-24 13:11:34

你似乎有一個錯字在你的HTML：

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

這應該叫「包裝」。

由於document.getElementById("wrapper")返回null，它沒有屬性樣式，所以你的JavaScript拋出錯誤。

你在什麼瀏覽器中測試它？您應該在IE窗口的左下角看到一個黃色的警告圖標，它會告訴您一些腳本錯誤。

Webpage error details

Message: Object required
Line: 34
Char: 13
Code: 0
URI: http://localhost:64888/ImageTest.aspx

如果您使用的是Firefox，讓自己的Developer Toolbar的副本，這將給你一個漂亮的紅色驚歎號從JavaScript確切的錯誤：

Error: document.getElementById("wrapper") is null
Source File: http://localhost:64888/ImageTest.aspx
Line: 34

來源

2010-06-24 13:05:44

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

回答

相關問題