Почему мой спиннер GIF останавливается во время выполнения вызова jQuery ajax?

Вы делаете синхронный вызов или асинхронный вызов? синхронные вызовы действительно вызывают блокировку браузера на время вызова. Другая возможность состоит в том, что система очень занята своей работой.

Я видел такое поведение в прошлом при вызовах AJAX. Я считаю, что это связано с тем фактом, что браузеры являются только однопоточными, поэтому, когда возвращается вызов AJAX, поток работает с вызовом, поэтому анимированный GIF должен на мгновение останавливаться.

Я не помню точно, что вызвало это, но у нас была аналогичная проблема с IE6 в загруженном ящике, и мы исправили ее с помощью этого невероятного взлома в Javascript:

setTimeout("document.images['BusyImage'].src=document.images['BusyImage'].src",10);

Это просто устанавливает источник изображения на то, что было раньше, но этого, очевидно, достаточно, чтобы вывести IE из ступора.

edit: Я думаю, что помню, что было причиной этого: мы загружали анимацию в div с display: none. IE загружает его и не запускает анимацию, потому что она скрыта. К сожалению, он не запускает анимацию, когда вы устанавливаете содержащий блок для display: block, поэтому мы использовали приведенную выше строку кода, чтобы обманом заставить IE перезагрузить изображение.

Вы уверены, что GIF не вращается во время вызова AJAX?

В вашем concessions.aspx поместите эту строку где-нибудь в обработке GetConcessions: -

System.Threading.Thread.Sleep(5000);

Я подозреваю, что gif вращается в течение 5 секунд, а затем зависает, пока IE отображает и рисует результат.

Браузер замораживается не из-за вызова Ajax. Это обработчик успеха (applyTemplate). Вставка HTML в такой документ может заморозить IE, в зависимости от того, сколько HTML там. Это потому, что интерфейс IE является однопоточным; если вы заметили, фактические меню IE тоже замораживаются, пока это происходит.

В качестве теста попробуйте:

applyTemplate = function(msg) {
   return;
}

У меня была аналогичная проблема с зависанием браузера. Если вы разрабатываете и тестируете локально, по какой-то причине браузер зависает. После загрузки моего кода на веб-сервер он начал работать. Надеюсь, это поможет, потому что мне потребовались часы, чтобы разобраться в этом самостоятельно.

ну это по многим причинам. Во-первых, когда ajax обратный вызов сервера, вы почувствуете, что ваш gif завис на несколько миллисекунд, но не так много. После того, как вы начнете обрабатывать информацию, и в зависимости от объектов, которыми вы манипулируете, и того, как вы это делаете, у вас будет больше или меньше времени, когда ваш gif будет заморожен. Это потому, что поток занят обработкой информации. Например, если у вас есть 1000 объектов и вы выполняете заказ и перемещаете информацию, а также используете команды jquery и append, insert, $ .each, вы почувствуете, что гифка заморожена. Иногда невозможно избежать всех замороженных гифок, но вы можете ограничить время несколькими миллисекундами, делая это: Создайте список ответов ajax и обрабатывайте его каждые 2 секунды (с этим вы получите результаты в отдельном массиве, и вы будете вызовите его с одним setInterval, и вы избежите узкого места при попытке обработать один ответ, когда предыдущий ответ все еще обрабатывается). если вы используете JQuery, не используйте $ .each, используйте for. Не используйте манипуляции с dom (добавление, вставка и т. д.), Используйте html (). В резюме делайте меньше кода, рефакторинга и обработки всего ответа (если вы сделали больше 1), как только 1. Извините за мой английский.

Изображение зависает, потому что пока оно скрыто, IE отключил анимацию.

Чтобы исправить это, добавьте загружаемое изображение вместо того, чтобы отображать его:

function showLoader(callback){
    $('#wherever').append(
        '<img class = "waiting" src = "/path/to/gif.gif" />'
    );

    callback();
}

function finishForm(){
    var passed = formValidate(document.forms.clientSupportReq);

    if (passed)
    {
        $('input#subm')
            .val('Uploading...')
            .attr('disabled','disabled');
        $('input#res').hide();
    }

    return passed;
}
$(function(){
    // on submit
    $('form#formid').submit(function(){
        var l = showLoader( function(){
                         finishForm() 
                    });

        if (!l){
            $('.waiting').remove();
        }

        return l;
    });
});

Я знаю, что вопрос касался асинхронных вызовов ajax. Однако я хотел добавить, что в своих тестах, касающихся синхронных вызовов ajax, я обнаружил следующее:

Для синхронных вызовов ajax. Пока выполняется вызов (т.е. ожидает ответа сервера). Для теста я поставил задержку ответа сервера на сервере.

Firefox 17.0.1 - анимированный gif продолжает правильно анимироваться.

Chrome v23 - анимированный gif останавливает анимацию во время выполнения запроса.

Ответ Деннисмонсевича великолепен. Используйте spin.js, и сайт http://fgnass.github.com/spin.js/ показывает шаг, который довольно прост. При тяжелом процессе мы должны использовать анимацию CSS. Не следует использовать JS-анимацию и GIF-файлы из-за ограничения на один поток, иначе анимация зависнет. CSS-анимация отделена от потока пользовательского интерфейса.

Браузеры бывают однопоточными и многопоточными.

Для любого браузера: Когда вы вызываете функцию, содержащую вложенную функцию ajax

java / сервлет / jsp / Контроллер> сохранить Thread.sleep (5000); в сервлете, чтобы понять асинхронность в ajax, когда правда или ложь.

    function ajaxFn(){
    $('#status').html('WAIT... <img id = "theImg" src = "page-loader.gif" alt = "preload" width = "30" height = "30"/>');
    $('#status').css("color","red");
    $.ajax({
        url:"MyServlet",
        method: "POST",
        data: { name: $("textarea").val(),
                id : $("input[type=text]").val() },
        //async: false,
        success:function(response){
            //alert(response);  //response is "welcome to.."
            $("#status").text(response);
            $('#status').css("color","green");
        },
        complete:function(x,y){
            //alert(y)
        },
        error:function(){
            $("#status").text("?");
        }
    });
}
 

Обертывание вызова ajax в функции setTimeout помогло мне предотвратить зависание gif-анимации:

setTimeout(function() {
    $.get('/some_link', function (response) {
        // some actions
    });
}, 0);