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

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();
    });

}