How to add Ajax loader during page loading in asp.net?

Question

I want to use ajax loader when loading a page with a transparent background. I tried the following code that displays the boot image, but how to cover the whole backgroung like transperent. My code is:

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

And my 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%; 
 }

If anyone knows any link or solution, please tell me. and in the css above, if I add the height property, the image will be displayed at page load time without a click event. thank.

Answer 1

Use an Iframe with a higher z-index to lock the homepage.

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

Use the following functions to show and hide the frame.

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

.

BlockPageContent "InitializeRequest" ShowPageContent "EndRequest". "InitializeRequest" "EndRequest" PageRequestManager.

Answer 2

, :

1) , , . 2) .

. , . , , " ". HTML/Javascript :

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

( , jQuery, .)

, , , , script, - (, Flash).

Answer 3

HTML:

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

"".

JavaScript , document.getElementById("wrapper") null, .

? IE , , script.

-

:
: 34
Char: 13
: 0
URI: http://localhost:64888/ImageTest.aspx

If you use Firefox, make yourself a copy of the developer toolbar , which will give you a nice red exclamation mark and an exact error from JavaScript:

Error: document.getElementById ("wrapper") does not matter.
Source file: http: // localhost: 64888 / ImageTest.aspx
Line: 34