顯示加載器動畫2-3秒然後處理 - .ajaxStart和.ajaxStop

Question

如何顯示加載器動畫3秒然後處理process.php？ 我用ajaxStart模塊和ajaxStop模塊中的setTimeout（）方法嘗試了它，但那不起作用。

<script type="text/javascript"> 
$(document).ready(function(){ 

$('#loading') 
.hide() // hide it initially 
.ajaxStart(function() { 
    $(this).show(); 
}) 
.ajaxStop(function() { 
    $(this).hide(); 
}); 

    $("#myform").validate({ 
     debug: false, 
     rules: { 
      name: "required", 
      email: { 
       required: true, 
       email: true 
      } 
     }, 
     messages: { 
      name: "Please let us know who you are.", 
      email: "A valid email will help us get in touch with you.", 
     }, 
     submitHandler: function(form) { 
      // do other stuff for a valid form 
      $.post('process.php', $("#myform").serialize(), function(data) { 

      $('#results').html(data); 
      }); 
     } 
    }); 
}); 
</script> 

這裏是形式：

<form name="myform" id="myform" action="" method="POST"> 
<!-- The Name form field --> 
    <label for="name" id="name_label">Name</label> 
    <input type="text" name="name" id="name" size="30" value=""/> 
    <br> 
<!-- The Email form field --> 
    <label for="email" id="email_label">Email</label> 
    <input type="text" name="email" id="email" size="30" value=""/> 
    <br> 
<!-- The Submit button --> 
    <input type="submit" name="submit" value="Submit"> 
</form> 
<!-- We will output the results from process.php here --> 
<div id="results"><div> 

<div id="loading">Loading</div> 

Answer 1

這裏是我的腳本的一個總結。

$(document).ready(function() { 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    $("#header-ajaxload").ajaxStart(function() { 
     $(this).html(ajax_load); 
    }); 
$("#header-ajaxload").ajaxStop(function() { 
     $(this).html(''); 
    }); 
    $("#header-ajaxload").ajaxError(function() { 
     $(this).text("Triggered ajaxError handler."); 
    }); 
}); 

var ajax_load = "<img src='home/img/ajax_load.gif' alt='loading...' />";