Загрузка анимации зависает в IE7, а иногда и в IE8 при выполнении асинхронного ajax-вызова

#jquery #ajax #internet-explorer-8 #internet-explorer-7 #gif

Вопрос:

Я использую анимированный gif-файл, который будет отображаться при отправке асинхронного запроса в веб-службу через jQuery.ajax() . GIF изначально скрыт ( display: none ) и отображается через .show() прямо перед отправкой запроса.

Он работает, как и ожидалось, в Chrome, FF и IE9 и выглядит просто отлично, но в IE8 его анимация время от времени зависает в процессе, а в IE7 просто показывает gif, но вообще не анимируется.

Я просматривал несколько потоков по этой проблеме, но они были довольно устаревшими (как и IE7 и IE8, я знаю. Но, к сожалению, нам все равно приходится полностью поддерживать эти браузеры) и, похоже, консенсус был следующим: невозможно — в IE7 есть только один поток для запуска JS и анимированных GIF-файлов.

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

Заранее спасибо, Борис

1. Нажимаете ли вы Esc клавишу на странице, чтобы что-то сделать (например, закрыть диалоговое окно)? Не уверен насчет других браузеров, но IE останавливает анимацию GIF при Esc нажатии.

Ответ №1:

вы могли бы попытаться выполнить вызов ajax в обратном вызове шоу, чтобы:

 $(".gif_element").show("normal", function() {
    $.ajax({})
});

конечно, это обходной путь

1. Похоже, это действительно помогает. Мне немного стыдно, что я не думаю об обратном вызове show. Я пробовал setTimeout s во всех возможных местах, но ничего не получалось. Спасибо! Теперь мне «просто» нужно найти решение для зависания, в то время как html вводится через jQuery. 🙂

Ответ №2:

Попробуйте удалить атрибут display: none с помощью jquery.

 $("#id or .class").css("display", "block" );

или

 $("#id or .class").removeAttr("display");

Со мной произошла та же проблема, и сработал один из вышеперечисленных. 🙂

1. Похоже, тоже работает. Спасибо! Хотя я думаю, что вы имеете в виду $("#id or .class").css("display", ""); в своем втором предложении, as display — это не атрибут html, а свойство css. 🙂

2. да, вы правы.. я просто скопировал свою предыдущую строку и забыл отредактировать 😉