Showing loading image indicator when ajax calling and also
loading display off when ajax get response.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#divLoadingd").css("display",
"block");
});
$(document).ajaxComplete(function(){
$("#divLoadingd").css("display",
"none");
});
$("button").click(function(){
$("#txt").load("demo_ajax_load.asp");
});
});
</script>
</head>
<body>
<div id="txt"><h2>Let
AJAX change this text</h2></div>
<button>Ajax Call</button>
<div id="divLoadingd"
style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;"><img
src='demo_wait.gif' width="64" height="64"
/><br>Loading..</div>
</body>
</html>
Note: Whenever an Ajax request is about
to be sent, jQuery checks whether there are any other outstanding Ajax requests.
If none are in progress, jQuery triggers the
ajaxStart event. Any and all handlers that
have been registered with the .ajaxStart()method are executed at this time
$(document).ajaxStart(function(){
$("#divLoadingd").css("display",
"block");
});
The ajaxComplete() method specifies a
function to be run when an AJAX request completes.
$(document).ajaxComplete(function(){
$("#divLoadingd").css("display",
"none");
});
Comments
Post a Comment