IE9 Перерисовка CSS во время отправки

У нас есть анимированный gif-спиннер, который мы используем, чтобы оживить кнопку отправки после того, как пользователь отправил форму. Если все проверки формы проходят успешно, мы назначаем фон с помощью метода jQuery css(), устанавливая фоновое изображение, позиционирование и цвет одновременно.

IE9 не показывает фоновое изображение при отправке, хотя оно продолжает отображаться в других браузерах.

Этот метод отлично работал в предыдущих браузерах IE, но, похоже, не работает в IE9, в том числе в старых «режимах браузера». Я не уверен, что это ошибка в IE9, но она определенно изменила поведение, и я не могу доверять режимам IE7/8 из-за этого.

Кажется, что, возможно, IE решает больше не перерисовывать после того, как пользователь отправил форму. Если это так, я не уверен, что у меня есть способ обойти это, но я хотел бы думать, что это не совсем так. Мы столкнулись с предыдущей проблемой с этой техникой в ​​Firefox, где мы обнаружили, что Firefox останавливает все HTTP-запросы, кроме самого запроса формы, что означает, что если фоновое изображение не было в кеше, оно не будет работать. Из-за этого мы начали предварительно загружать счетчик для объекта изображения в памяти.

Интересно, что если я вручную вызываю метод, который обновляет CSS на кнопке из консоли инструментов разработчика IE, он работает нормально. Только когда у нас есть фактическая отправка, она становится упрямой и не может привлечь счетчик. Также интересно, что он удаляет текст из кнопки отправки, что является второй частью эффекта.

У кого-нибудь есть идеи о том, что вызывает это / как это предотвратить?

Вот урезанная версия кода live()d, который обрабатывает отправку:

jQuery.fn.disableSubmit = function() {
    this.find("input[type=submit]").each(function() {
        $(this).css({"background": "url(/asdasdasd.gif) no-repeat 50% 50%"});
    });
    return this;
};

$("form").live("submit", function() {
    var form = $(this);

    form.disableSubmit();
    return true;
});

forms jquery background-image submit internet-explorer-9
person thynctank    schedule 10.05.2011    source источник
comment
Какой код показать? Вы устанавливаете CSS до или после вызова отправки страницы? Используете ли вы поведение кнопки отправки по умолчанию или вручную вызываете submit() из своего кода?   -  person Robert Beuligmann    schedule 11.05.2011
comment
Кода нет, хотя я могу придумать его позже сегодня или завтра. CSS устанавливается после отправки события отправки, но до того, как сработает поведение по умолчанию. Это фактическая отправка (через клавишу ввода в поле или нажатие кнопки отправки), а не программный вызов отправки.   -  person thynctank    schedule 11.05.2011
comment
Попробуйте <button type=submit><img ...gif></button>. Будет ли он демонстрировать такое же поведение?   -  person c-smile    schedule 11.05.2011
comment
Бывают случаи, когда dom не удается обновить определенный элемент, и я вынужден вручную запускать его, используя $(...).hide().show(0); Это, очевидно, хак, но иногда помогает.   -  person cwharris    schedule 11.05.2011
comment
Кроме того... что с .each(...) ? Не могли бы вы просто вызвать .css(...) без перебора каждого элемента вручную?   -  person cwharris    schedule 11.05.2011
comment
Спасибо, но не спасибо за замену каждой кнопки отправки на элемент кнопки, c-smile. Лучше бы вообще не было эффекта.   -  person thynctank    schedule 11.05.2011
comment
Бит hide().show(0) — это круто, но кажется, что он отключает анимацию в анимированном gif-файле, который у нас есть в качестве фонового изображения. Что касается each(), на самом деле в каждом из них происходит больше, чем просто вызов css(), и это не все цепочка.   -  person thynctank    schedule 11.05.2011

Ответы (1)


arrow_upward
0
arrow_downward

У меня была аналогичная проблема с ExtJS, и я обнаружил именно то, что вы обнаружили в IE9, который не загружает новые изображения после отправки формы.

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

function() {    
    Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
    setTimeout(function() { document.getElementById('rental_increase_form').submit(); }, 200);
    return false;
}

В основном я возвращаю false, когда срабатывает событие отправки формы, я выполняю всю загрузку CSS, а затем вручную отправляю форму через Javascript после тайм-аута в 200 миллисекунд.

Надеюсь, это поможет. Вы отправили сообщение об ошибке в Microsoft?

person Philip Walton    schedule 25.08.2011