显示加载程序动画2-3秒,然后处理-ajaxStart和.ajaxStop


Show loader animation for 2-3 seconds and then process - .ajaxStart and .ajaxStop

如何显示加载程序动画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>

这是我的一个脚本的摘要。

$(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...' />";