Как я могу сделать так, чтобы IE 9 анимировал gif прямо перед отправкой формы?

Question

Итак, у меня есть анимированный GIF, который я хочу показывать только тогда, когда пользователь нажимает кнопку отправки. Таким образом, он думает, что что-то происходит, если для ответа требуется некоторое время.

Проблема в IE9GIF не оживляет.Я попытался добавить его динамически и добавить его до того, как он ушел со страницы, и ни один из них не работал.Я также попытался добавить задержку перед добавлением GIF, но это тоже не помогло.

Еще одна вещь, я думаю, это может быть связано с формой, выполняющей POST, а не с запросом GET (опыт запроса GETэта проблема), однако мне нужно сделать GET по причинам, в которые я бы не хотел входить.

Answer 1

Не уверен насчет вашей конкретной проблемы IE9, но вы можете попробовать сделать это в jquery:

$(function(){
  $('form#my-form').submit(function(e){
    $('#my-animating-gif').show();
  });
};

и просто загрузите анимированный GIF-файл в DOM на странице с атрибутом style="display:none;" (или скрытым классом и соответствующим CSS в вашей таблице стилей)

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

$(function(){
  $('form#my-form').submit(function(e){
    e.preventDefault();
    $('#my-animating-gif').show();
    $(this).submit();  // <-- This might cause infinite recursion
                       // into this event handler.  Probably a
                       // terrible idea.  Go with the above version,
                       // or serialize the form data yourself and submit
                       // it as a separate form but that's outside
                       // of the scope of this answer.
  });
};

Answer 2

Как только вы отправляете форму на странице, все выполнение текущей страницы останавливается. Вместо этого вы можете использовать AJAX или опубликовать свою форму в Iframe.

Answer 3

Это было проблемой с каждой версией IE.К сожалению, большинство старых обходных путей не работают с IE9.Один, который все еще делает это spin.js , если вы в порядке с решением только для JavaScript.Это довольно просто и не имеет зависимостей (хотя для этого есть плагин jQuery).Основной синтаксис:

HTML:

<div id="spinner" style="width:24px; height:24px"></div>

JS:

var opts = {
    lines: 12,
    length: 7,
    width: 4,
    radius: 12,
    color: '#000',
    speed: 1,
    trail: 54
};
var target = document.getElementById('spinner');
var spinner = new Spinner(opts).spin(target);