delay the showing of a ajax loading gif using jQuery

Question

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

Answer 1

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'));