加載程序gif工具

Question

我在執行加載程序gif時遇到了一些問題，我的表單正在提交到另一個頁面，處理器頁面。這是代碼：

形式：前搜索結果中顯示

<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
<div align='center'> 


<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
<font face='candara' size='3' color='#6382A1'>Ime ili prezime:</font> 
    <input type="text" name="name" id="name" value=""> 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#myform").validate({ 
debug: false, 
rules: { 
name: "required", 

}, 
messages: { 
name: "Unesite podatke.", 

}, 
submitHandler: function(form) { 
// do other stuff for a valid form 
$.post('process.php', $("#myform").serialize(), function(data) { 
           $('#results').html(data); 
          }); 
         } 
        }); 
       }); 
       </script> 
       <style> 
label.error { width: 250px; display: inline; color: red; font-family:candara;} 
        </style> 


       <!-- We will output the results from process.php here --> 
       <br><div id="results"></div> 

所以我不知道在哪裏以及如何實現裝載機GIF？

這是裝載機GIF：

<!--LOADER!-->        


<br><div id="loadingGif" style="display:none; background: url(slike_izgled/transparent_loader.png);" align="center"><img src='ajax-loader.gif'> 
<br><font face='candara' size='3'><b>Pretražujem bazu podataka, molim pricekajte...</b></font></div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 


<script> 

$("form").submit(function(e) { 
//e.preventDefault(); 

$("#loadingGif").show(); 
}); 

</script> 



       <!--LOADER END!--> 

Answer 1

在submitHandler

使用$.ajax代替$.post，你將能夠使用beforeSend

$.ajax({ 
    type : 'post', 
    url : 'your url', 
    data : 'your data', 
    beforeSend : function(){ 
     $('#loadingGif').show(); 
    }, 
    success : function(data){ 
     $('#loadingGif').hide(); 
     // do your stuff here 
    } 

}）;