jquery ajax loading gif

How do I add a loading gif during the jQuery AJAX processing? I read some tutorials, they use beforeSend. but still not see the loading thing.

<script src="jquery-1.6.1.min.js"></script>
<script>
$.ajax({
url: "index_2.php", 
dataType: "html",
type: 'POST', 
data: "value=something",
beforeSend: function () {
    $("#result").html('<img src="loding.gif" /> Now loding...');
},
success: function(data){ 
  $("#result").html(data); //even add .delay(5000)
}
});
</script>
<div id="result"></div>

index_2.php

<?php
sleep(5);
echo $_POST['value'];
?> 

I set sleep(5); in index_2.p开发者_JS百科hp, it should show the londing.gif in the div#result for 5 seconds, until the data return from index_2.php.

may be an idea is before calling the ajax request load the image like you done ie

$("#result").html('<img src="loding.gif" /> Now loding...');

then onsuccess bind the data

there's a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.

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

The ajaxStart/Stop functions will fire whenever you do any ajax calls.

Have a look at the $.ajaxStart() function, which will execute whenever any Ajax request is started (obviously).

Check this question for details.