Navi's

Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Show loader on page load in asp.net

Posted by Navi's on March 24, 2011


To show loader while page is loading we have to use bellow code snippet. put this code on your master page or page. And overrride the OnLoad and Render methods.

protected override void OnLoad(EventArgs e)
    {
        if (!IsPostBack)
        {
            Response.Buffer = false;
            Response.Write("<div id='divImage'><div style='float: right;'><img src='loader.gif' />Please wait...</div></div>");
            Response.Flush();
        }
        base.OnLoad(e);
    }
    protected override void Render(HtmlTextWriter writer)
    {
        if (!IsPostBack)
        {
            Response.Clear();
            Response.ClearContent();
        }
        base.Render(writer);
    }
   

and to hide loader we uses bellow javascript code snippet. Put this code at the end of page

 
<script language="javascript" type="text/javascript">
        try
          {
                var divLImage =  document.getElementById("divImage")
                if (divLImage != null && typeof(divLImage ) != 'undefined')
                   {
                        divLImage .style.display="none";
                        divLImage .parentNode.removeChild(divLoadingMessage);
                   }
         }
        catch(e)
         {
         }
    
    </script>

css for loader div

#divImage {
     position: absolute;
    padding: 4px;
    top: 0px;
    right: 0px;
    color: gray;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 150px;
    font-weight: bold;
    height:20px;
}

Whenever you request any page it’ll show loader on that page during load.
That’s it🙂

2 Responses to “Show loader on page load in asp.net”

  1. Syed Nasir said

    Nice post.

  2. swapnil said

    best guru

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: