Home > jQuery > jQuery Ajax Loading Image

jQuery Ajax Loading Image

First we need a div element which holds the image that to be displayed as loading

<div id="loader" >
<img src="/images/ajax-loader.gif" class="centeredImage"/>
</div>

CSS class for displaying the loading image on center

.centeredImage {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -150px;
}

Now we need to have encapsulate our page elements inside a div and by default hide it

<div id='mainDiv' style='display:none;'>
<!-- All form elements goes here -->
</div>

Use following code

   
$(function () {     
        $(document).ajaxStart(function () {
            //Don't need to do anything here as 
            //maindiv is hidden and loader div is displayed
        });

        $(document).ajaxStop(function () {
            $('#mainDiv').show();
            $('#loader').hide();
        });
});
Advertisements
Categories: jQuery
  1. No comments yet.
  1. No trackbacks yet.

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: