I put this code:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<script type="text/javascript">
$(document).ajaxStart(function() {
$("#loading-image").show();
});
$(document).ajaxStop(function() {
$("#loading-image").hide();
});
on the top of the page...
and I have HTML:
<body style="">
<div id="loading-image" style="width:100%; height:100%; background:#ccc; display:none;"></div>
But I dont see ID loading image on ajax... What can be a problem here?
From the limited amount that you posted, it doesn't look like you're actually making an AJAX request. http://jsfiddle.net/volte/A66C8/
Try then making an ajax call when the page loads:
$.ajax({
url: "test.html",
context: document.body
});
Disclaimer: I have not tested this. Pulled from http://api.jquery.com/jQuery.ajax/
In addition, make sure you wrap those methods in an onload. Most people do:
(function() {
//... your code here ...
//... will be run on load...
});
The code doesn't seems to have anything wrong, make sure that those methods are in fact beeing called whenever you use ajax, put a breakpoint in the element inspector. Also check if when you manually remove display:none from the "loading-image" div you can see it on the screen, just to be sure.