Thursday, July 1, 2010

Show loading Image between postback using Jquery

In one of my articles I have explained you how to show loading Image between postback using Javascript.

http://mani-thought.blogspot.com/2010/07/how-to-show-loading-image-between_01.html

In this article I will explain how the same can be acheived using JQuery. Just place the below peice of code in the master page and it will do the job.


   1:  <html>

   2:  <head runat="server">

   3:      <title>XYZ</title>

   4:      <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>

   5:      <asp:ContentPlaceHolder ID="head" runat="server">

   6:      </asp:ContentPlaceHolder>

   7:  </head>

   8:  <body>

   9:   //show loading Image by default.

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

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

  12:   </div>

  13:   

  14:   <form>

  15:      //...............

  16:      //Place for all the controls and events ..

  17:      //................ 

  18:   </form>

  19:   

  20:   <script type="text/javascript">

  21:        $(document).ready(function(){ 

  22:           //Hides the loading image..

  23:           $('#loading').hide();

  24:        });          

  25:   </script>

  26:  </body>

  27:  </html> 


In the above code the loading image is shown by default as the page is loaded and we make use of Jquery's $(document).ready() event to hide the loading image as this is called when the page is fully loaded.

Please leave a comment before you leave.

1 comment: