Thursday, July 1, 2010

Show loading Image between postback using Javascript

Its always good idea to show loading image when the user navigates from one page to another.It can be easily achieved by adding some events and javascript functionality.

In the below code you can see that I have made use of onload and onunload events in the body tag.The onload event hides the loading image and onunload event shows the loading event.
For example when user navigates from page 'a' to page 'b' . The onunload event of page 'a' is called first followed by page 'b' onload event.


<body id="MainBody" onload="init();" onunload="ShowLoading();">

<div id="loading" style="position: absolute; width: 100%; text-align: center; top: 300px;left: 10px;">

     //Loading image ...

     <img src="../images/loading.gif" border="0" />

</div>

    <script> 

    //Check for the browsers...

    var ld=(document.all) ? true : false;  

    var ns4=(document.layers) ? true : false;   

    var ns6=(document.getElementById&&!document.all) ? true : false; 

    var ie4=(document.all)? true : false;

    if (ns4)

    {

     ld=document.loading; 

    }

    else if (ns6)

    {

     ld=document.getElementById("loading").style; 

    }

    else if (ie4)

    {

     ld=document.all.loading.style;  

    }

    

    //Hide the Loading image ...

    function init() 

    {

         if(ns4)

         {

           ld.visibility="hidden";

         } 

         else if(ns6||ie4)

         {

           ld.display="none"; 

         }

    } 

    

    //Show the loading image...

    function ShowLoading()

    {

         if(ns4)

         {

           ld.visibility="visible";

         } 

         else if(ns6||ie4)

         {

           ld.display="block"; 

         }

    }

    </script>

</body>


Add the above code in the master page so that it follows to all the pages.

No comments:

Post a Comment