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

Question

Я только начинаю отучать себя от ASP.NET UpdatePanels. Я использую jQuery и jTemplates, чтобы связать результаты веб-сервиса с сеткой, и все работает отлично.

Вот в чем дело: я пытаюсь показать вращающийся GIF во время обновления таблицы (как UpdateProgress в ASP.NET) У меня все работает, за исключением того, что счетчик заморожен. Чтобы увидеть, что происходит, я попытался отодвинуть счетчик от div прогресса обновления и вывести его на страницу, где я могу видеть его все время. Он вращается и вращается до тех пор, пока не начнется обновление, и останется замороженным до завершения обновления, а затем снова начнет вращаться. Не совсем то, что вы хотите от спиннера «пожалуйста, подождите»!

Это в IE7 - еще не было возможности протестировать в других браузерах. Какие-нибудь мысли? Является ли вызов ajax или привязка данных на стороне клиента настолько ресурсоемким, что браузер не может использовать анимированные GIF-файлы?

Обновление

Вот код, который обновляет сетку. Не уверен, является ли это синхронным или асинхронным.

updateConcessions = function(e) {
    $.ajax({
        type: "POST",
        url: "Concessions.aspx/GetConcessions",
        data: "{'Countries':'ga'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            applyTemplate(msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        }
    });
}

applyTemplate = function(msg) {
    $('div#TemplateTarget').setTemplate($('div#TemplateSource').html());
    $('div#TemplateTarget').processTemplate(msg);
}

Обновление 2

Я только что проверил документацию jQuery , и метод $.ajax() по умолчанию является асинхронным. Просто для удовольствия я добавил это

$.ajax({
    async: true,
    ...

и это не имело никакого значения.

Answer 1

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

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

applyTemplate = function(msg) {
   return;
}

Answer 2

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

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

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

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

Answer 3

Изображение останавливается, потому что пока оно скрыто, 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;
    });
});

Answer 4

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

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

System.Threading.Thread.Sleep(5000);

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

Answer 5

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 9

1. Браузеры являются однопоточными и многопоточными. Для любого браузера:

2. Когда вызываемая функция содержит вложенную функцию ajax, // здесь код java / servlet / 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);
       },
       complete:function(x,y){
           //alert(y)
       },
       error:function(){
           $("#status").text("?");
       }
   });
   $('#status').css("color","green");
   

   }

Async: true для однопоточных браузеров, поэтому dom загружается немедленно И не помещайте целевой дом в успех, потому что функция успеха ждет ответа. Так что до этого времени ваш дом не будет загружен.

Answer 10

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