Display Loading image animation while loading data from server asynchronously using javascript/jquery

 function AjaxCalltoGetResults() {  
   var xmlhttp;  
   var demoval="demo";  
   var responsestring;  
   displayloader("#myLoader"); // < -- Display Loading Animation   
   if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
     xmlhttp = new XMLHttpRequest();  
   }  
   else {// code for IE6, IE5  
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
   }  
   xmlhttp.onreadystatechange = function () {  
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
       responsestring = xmlhttp.responseText;  
       hideloader("#myLoader");// < -- Hide Loading Animation   
       DemoMethod(responsestring); // < -- Call Any Method or display Results   
     }  
   }  
   xmlhttp.open("GET", "Demopage.aspx?demovar=" + demoval, true);  
   xmlhttp.send();  
 }  
  //pass loader id to display/hide loader  
     function displayloader(loaderid) {  
       $(loaderid).css({  
         height: $(loaderid).parent().height(),  
         width: $(loaderid).parent().width()  
       });  
       $(loaderid).show();  
     }  
     function hideloader(loaderid) {  
       $(loaderid).hide();  
     }  

 //css for image display  
 .ajax-loader {  
   cursor: wait;  
   background:#ffffff url('../img/ajax-loader.gif') no-repeat center center;  
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";  
   filter: alpha(opacity=75);  
   opacity: 0.75;  
   position: absolute;  
   z-index: 10000;  
   display: none;  
 }  

 //put this where you want to display image  
 <div id="myLoader" class="ajax-loader"></div>  

//Image