Question

Is it possible to show the “Loading..” animation only if the ajax call takes more than say, one second? Some of my ajax calls are pretty fast but I still see the loading icon for a fraction of a second before it disappears. May be it’s just me, but I find it distracting. I don’t want to remove it altogether though. Any suggestions? Here’s my code –

    $('#loading').hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

<div id="loading">
    <img alt="Loading, please wait.." src="/content/images/spinner.gif" />
</div>

Answer 1

You should put your code in a timer:

var $loader = $('#loading'), timer;

$loader.hide()
    .ajaxStart(function()
    {
        timer && clearTimeout(timer);
        timer = setTimeout(function()
        {
            $loader.show();
        },
        1000);
    })
    .ajaxStop(function()
    {
        clearTimeout(timer);
        $loader.hide();
    });