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

Ответ 1

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

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

applyTemplate = function(msg) {
   return;
}

Ответ 2

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

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

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

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

Ответ 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;
    });
});

Ответ 4

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

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

System.Threading.Thread.Sleep(5000);

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

Ответ 5

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

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

• Когда вызываемая функция содержит вложенную функцию ajax, // код здесь java/servlet/jsp поместить код Thread.sleep(5000); в сервлете, чтобы понять async в ajax, когда true или false.

  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 будет загружаться немедленно. И не помещайте целевой дом в успех, потому что функция успеха ждет ответа. Поэтому до этого времени ваш дом не получит нагрузки.