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

Question

Hello

I want to use an ajax loader while loading the page with transparent background. I tried the following code which displays the loading image but how to cover whole backgroung as 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 is:

.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 any solution please tell me. and in the above css if i add the height property the image get displayed at the page load time without click event. thank you.

Answer 1

To clarify, which of the following are you trying to do:

1) Load a page and, when the user invokes a post-back, display a loader while waiting for the post-back. 2) Display a loader at the beginning of the page that's actually loading.

From the description, it sounds like the latter. If so, this is a very uncommon approach. Depending on the page content, it can be difficult to know when it's truly "done loading." For an HTML/Javascript setup, your best bet would probably be:

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

(Note that you'll need jQuery for this, if you don't have it already.)

Things can get much more complicated if you have content that's delayed for other reasons though, such as waiting for a loaded script to do something or waiting for a browser plugin (such as Flash).

Answer 2

You appear to have a typo in your HTML:

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

This should be called "wrapper".

Your JavaScript is throwing an error because document.getElementById("wrapper") is returning null, which doesn't have a property style.

What browser are you testing this in? You should be seeing a little yellow warning icon in the bottom left of IE's window that will give you some clue that there's a script error.

Webpage error details

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

If you are using Firefox, get yourself a copy of the Developer Toolbar which will give you a nice red exclamation mark and the exact error from JavaScript:

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

Answer 3

Use an Iframe with an higher z-index to block the main page.

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

and call the above function in the following fashion.

Call BlockPageContent in "InitializeRequest" and ShowPageContent in "EndRequest". "InitializeRequest" and "EndRequest" are eventhandlers of PageRequestManager object.