What is the best way to put a delay on the showing of a ajax-loader gif. When I click a button the loader gif shows and hides even if the time taken is a few hundred milli-secon
Thought I'd share something I did for this. I had a situation where I needed to do more than just show or hide the one element. So I used bind to create custom events for the loader:
$("#loader").bind("delayshow", function (event, timeout) {
var $self = $(this);
$self.data('timeout', setTimeout(function () {
// show the loader
$self.show();
/*
implement additional code here as needed
*/
}, timeout));
}).bind("delayhide", function (event) {
// close and clear timeout
var $self = $(this);
clearTimeout($self.hide().data('timeout'));
/*
implement additional code here as needed
*/
});
// show it with a 500 millisecond delay
$("#loader").trigger('delayshow', 500);
// hide it
$("#loader").trigger('delayhide');
As you can see I added a timeout which delay showing for 300ms. If ajax is faster the timeout is cancelled before the loader gets really shown.
<script type="text/javascript">
var showLoader;
$(document).ready(function() {
$('#loader').hide();
$('#btnGetPeople').click(function() {
// only show loader if ajax request lasts longer then 300 ms
showLoader = setTimeout("$('#loader').show()", 300);
$.getJSON("/User/GetName/10",
null,
function(data) { showPerson(data); });
});
});
function showPerson(data) {
clearTimeout(showLoader);
alert(data);
$('#loader').hide();
}
</script>
Here is a fun way to do it. Replace $loader.show()
with this:
$("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));
And your hide command with this:
window.clearTimeout($("#loader").hide().data('timeout'));
You could also do it like this.
var loadingTimer;
$(document).ready(function () {
$("#loader").ajaxStart(function () {
loadingTimer = setTimeout(function () {
$("#loader").show();
}, 200);
});
$("#loader").ajaxStop(function () {
clearTimeout(loadingTimer);
$(this).hide();
});
}