Description
You should do this using jQuery.ajaxStart and jQuery.ajaxStop.
- Create a div with your image
- Make it visible in
jQuery.ajaxStart - Hide it in
jQuery.ajaxStop
Sample
<div id="loading" style="display:none">Your Image</div>
<script src="https://stackoverflow.com/questions/8761713/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script>
$(function () {
var loading = $("#loading");
$(document).ajaxStart(function () {
loading.show();
});
$(document).ajaxStop(function () {
loading.hide();
});
$("#startAjaxRequest").click(function () {
$.ajax({
url: "http://www.google.com",
// ...
});
});
});
</script>
<button id="startAjaxRequest">Start</button>