当我的php文件解析和下载数据时，调用preloader(gif，加载图像)

Question

这是我的php文件，正在从服务器下载图像和数据文件。

<?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');

?>

我正在调用这个php文件从j-查询按钮点击下面的event...as

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

现在我想调用这个文件进行下载，当它下载图像时，我想显示正在加载图像或进程轮(.gif)文件，当它完成下载这个图像隐藏后，它返回到我的jquery/html文件，从那里调用文件；我也尝试过用ajax，但我的图像没有显示我不知道为什么？这两个文件都在同一个文件夹中，但当我点击按钮并下载图像时，它不会回调到我的html/juery文件，也不会显示预加载的.gif图像

下面是我如何使用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

使用以下命令：

就在ajax函数之前：

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

在ajax函数之后：

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