Jquery Ajax Requests submit loading Image

Jquery Ajax Requests submit loading Image

show a loading image when an AJAX request

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#loading')
.hide()
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
});
$('#submit').click(function() {
$('.test_content').load('load_content.php');
return false;
});
});
</script>
<h4>Jquery Ajax Requests submit loading Image </h4>
<div class='test_content'></div>
<p><a id="submit" href="#">Submit</a></p>

<div id="loading">
<img src="ajax-loader.gif"  />
</div>

//load_content.php
<?php
sleep(4);

echo '
This content was loaded from a PHP script.
';

?>