Загрузка gif-изображения не отображается в IE и хроме

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

Но загрузка изображения видна в Firefox, но не в IE и хром. Когда я отлаживаю, я обнаружил, что в IE, когда мы вызываем java script, он перестает показывать изменения в браузере, поскольку он останавливает DOM, и когда вызов завершен, он показывает все изменения. Так как я показывает загрузочное изображение на вызов ajax и удаляю его после завершения вызова, IE не отображает изображения.

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

Есть ли способ остановить выполнение java script за миллисекунду, чтобы приостановить выполнение IE и загрузить изображение.

Я уже пробовал ajaxSend, ajaxComplete, ajaxStart, ajaxStop события JQuery и таймера java script, но не получил никакого решения.

Любая помощь драгоценна, спасибо заранее.

ОТВЕТЫ

Ответ 1

В контексте XHR синхронно означает, что браузер зависает, пока запрос не будет завершен. Если вы хотите, чтобы убедиться, что только один запрос запущен в заданное время, используйте свой собственный флаг, чтобы указать, что запрос выполняется.

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

Никогда не зависеть от браузера для обеспечения безопасности или прав функций, связанных с функциональностью. Если ваше приложение может быть повреждено, если клиент выполняет два запроса параллельно, тогда у вас есть ошибка на стороне сервера, Ничто не мешает злоумышленнику выполнять параллельные запросы с использованием других инструментов, чем обычный пользовательский интерфейс.

Ответ 2

Вероятно, проблема заключается в "синхронизированной" части в открытии сообщения.

Откройте соединение асинхронно. Это блокирует блокировку браузера, и он будет работать так, как вы ожидаете. (установите async = true на объект XmlHttpRequest/activex)

Ответ 3

попробуйте показать загружаемое изображение в начале вашего jquery-вызова ajax и скрыть его при успешном событии

или

вы также можете использовать устаревшее время

Ответ 4

Я также столкнулся с подобной проблемой при работе с ajax, например, когда я применил некоторые стили к пользовательскому интерфейсу во время вызова ajax, но они не применяются к пользовательскому интерфейсу и то же, что и вы сказали, что если мы добавим предупреждение, оно будет работать так, как ожидается, до тех пор, пока не будет нажата кнопка ОК для предупреждения

Я не могу догадаться, почему это происходит, но вы можете использовать JQuery для показа или Hide that Loading.... div Надеюсь, он сработает.

Ответ 5

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

Ответ 6

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

Существует обходной путь для управления DOM и отображения элемента перед запуском вызова ajax. Используйте jQuery animate() и сделайте вызов ajax в обратном вызове для завершения анимации. Следующий код работает для меня:

//show the loading animation div
$('#loading').show();

//call dummy animate on element, call ajax on finish handler
$('#loading').animate({
    opacity: 1
  }, 500, function() {
        //call ajax here
        var dataString = getDataString() + p + '&al=1';
        $.ajax(
        {
            type: 'GET',
            async: false,
            url: 'uldateList.php',
            data: dataString,
            dataType: 'json',
            success: function(result){
                //Do something with result
                ...
                //hide loading animation
                $('#loading').hide();
            }
        });
  });

Ответ 7

Вы можете попробовать выполнить синхронный вызов ajax в обратном вызове загрузки изображения.

Что-то вроде:

var img = new Image();
img.src = "loading.gif";
img.onload = function() {
    /* ajax synch call */
}

Затем добавьте img в DOM.

Ответ 8

Привет, попробуйте изменить ajax-вызов, как это работает для меня

    xmlHttp.open('POST', url, true);
xmlHttp.onreadystatechange = myHandlerFunction;
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.setRequestHeader("Accept-Charset", "charset=UTF-8");
xmlHttp.send(query);

Ответ 9

Я использовал информацию Серджиу Думитриу как базу. Я установил асинхронное значение true и добавил

  beforeSend: function() {
    $('#Waiting').jqmShow();
  },
  complete: function() {
    $('#Waiting').jqmHide();
  }

И это сработало для меня. В основном я создал собственный атрибут async: false.

Ответ 10

В вашем вызове $.ajax вам нужно добавить async: true. Следующий код работает для меня:

$.ajax({
    url: 'ajax_url',
    data: 'sending_data',
    type: 'POST',
    cache : false,
    async: true,
    beforeSend: function() {
        $('#id_of_element_where_loading_needed').html('html_of_loading_gif');
    },
    success: function(data) {
        $('#id_of_element_where_result_will_be_shown').html(data.body);           
    }
});