Задерживать показ gif-загрузки gif с помощью jQuery

Каков наилучший способ поставить задержку на показ gif-ajax-loader. Когда я нажимаю кнопку, gif загрузчика показывает и прячется, даже если время составляет несколько сотен миллисекунд, это дает браузеру некоторое мерцание. Я хочу сказать только показать gif, если для завершения запроса ajax потребуется более 1000 миллисекунд.

 <script type="text/javascript">
     $(document).ready(function() {
         $('#loader').hide();
         $('#btnGetPeople').click(function() {
            $('#loader').show();
             $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
         });
     });

     function showPerson(data) {
         alert(data);
         $('#loader').hide();
     }
</script>

Мой загрузчик div содержит....

<div id="loader"><img alt="" src="/content/ajax-loader.gif" /></div>

Каков наилучший способ достижения этого?

Ответы

Ответ 1

Как вы можете видеть, я добавил тайм-аут, который показывает задержку на 300 мс. Если ajax быстрее, таймаут отменяется до того, как загрузчик действительно отображается.

<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>

Ответ 2

Вот забавный способ сделать это. Замените $loader.show() следующим образом:

$("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));

И ваша команда hide с этим:

window.clearTimeout($("#loader").hide().data('timeout'));

Ответ 3

Вы также можете сделать это так.

var loadingTimer;

$(document).ready(function () {

    $("#loader").ajaxStart(function () {
        loadingTimer = setTimeout(function () {
            $("#loader").show();
        }, 200);
    });

    $("#loader").ajaxStop(function () {
        clearTimeout(loadingTimer);
        $(this).hide();
    });

}

Ответ 4

Думал, что поделюсь тем, что я сделал для этого. У меня была ситуация, когда мне нужно было больше, чем просто показать или скрыть один элемент. Поэтому я использовал bind для создания пользовательских событий для загрузчика:

$("#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');