call preloader(gif , loading image) while my php file parse and download data

Question

this is my php file which is downloading image and data file from server

<?php 
        header("Cache-Control: no-cache, must-revalidate");
        //header("Expires: Tue, 25 sep 2012 09:00:00 GMT+5.30");
        header("Content-Type: application/xml; charset=utf-8");
        clearstatcache();
 // download xml.....................................................   
        $url = "http://ippaddress/msn/getdata.php?result=3";
        //echo $url;
        $filename = "E://wamp/www/msn_mytype01-12-12/test.xml";

        $handle = file_get_contents($url);  
        file_put_contents($filename, $handle);      
        $doc = new DOMDocument();
        $doc->load( 'test.xml' );


        $employees = $doc->getElementsByTagName( "detail" );
        foreach( $employees as $employee )
        {
            $id = $employee->getElementsByTagName( "image" );
            $imgid = $id->item(0)->nodeValue; 
            // download Images.........................
            $imageUrl = "http://ippaddress/msn/IMAGE/".$imgid;
            $filename = "E://wamp/www/msn_mytype01-12-12/Images/".$imgid;
            $handle = file_get_contents($imageUrl); 
            file_put_contents($filename, $handle);          
        }       
        echo('XML Downloded-Successfullyy');

?>

i am calling this php file from j-query button click event...as below

$(document).on('click','#syncdata',function(){
    window.location.href="downloadfiles.php";
});

now i want tp call this file for download and while it is downloading images i wanna show loading image or process wheel (.gif) file and when it complete downloading this image hide and it comes back to my jquery/html file from where file has being called; I have also tried this with ajax but my image is not displayed i dont know why ? . Both this file is in same folder but when i click on button and it download image but it do not callback to my html/juery file and do not display preloading .gif image

below is how i have done using ajax

  $(document).on('click','#test',function(){
                       makeRequest();
               });        
               function makeRequest(){
           var sendurl={address:'htp://localhost:8082/BMS_mytype/downloadfiles.php'}
                       $('#preloader').show();
                       $.ajax({
                               type:"POST",
                               url:"dummycall.php",
                               data:sendurl,                                
                               success:function(xml){
                                       alert(xml);
                                       var result= $(xml).find('status').text();
                                       if(result == "Success")
                                       {                
                                        $('#preloader').hide();
                                        window.location.href="option.html";
                                       }
                                       callback.call(null);
                               },
                               error: function(){
                                       alert("An error occurred while processing XML file.");
                               }        //error ends..                        
               });

               $('#preloader').hide();
           });

Answer 1

use this:

just before ajax function:

$(document).ajaxStart(function(){
   $('#preloader').show();
});

just after ajax function:

$(document).ajaxComplete(function(){
   $('#preloader').hide();
});