IE9提交时重新绘制CSS [英] IE9 Submit-time CSS Repainting

问题描述

在用户提交表单后，我们使用了一个动画微调器gif来调出提交按钮。如果所有验证都通过了表单，我们通过jQuery的 css（）方法分配背景，将背景图像，位置和颜色设置为一个整体。

We have an animated spinner gif we use to spice up the submit button after the user has submitted a form. If all validation passes on a form, we assign background via jQuery's css() method, setting the background image, positioning and color all in one.

IE9在提交时并未显示背景图片，尽管它在其他浏览器中仍然可以看到。

IE9 is not showing the background image on submit, though it continues to be seen in other browsers.

这项技术在以前IE浏览器，但似乎在IE9中已经崩溃，包括在旧的浏览器模式中。我不确定这是否是IE9中的一个错误，但它确实改变了行为，我不能相信IE7 / 8模式的行为正是因为这个原因。

This technique has worked fine in previous IE browsers, but seems to have broken in IE9, including in older "browser modes". I'm not sure if this is a bug in IE9, but it certainly has changed behavior and I cannot trust IE7/8 modes to behave as expected because of this.

似乎IE可能会在用户提交表单后决定不再进行重新绘制。如果是这种情况，我不确定我有办法解决它，但我想这不是真的。我们在Firefox中遇到了以前的这个技术问题，我们发现Firefox除了表单请求本身之外停止了所有http请求，这意味着如果背景图像不在缓存中，它将不起作用。正因为如此，我们已经在内存中的Image对象上预加载了Spinner。

It seems as though maybe IE decides not to do any more repainting after the user has submitted the form. If this is the case I'm not sure I've got a way around it, but I'd like to think this isn't really the case. We ran into a previous problem with this technique in Firefox, where we discovered that Firefox halts all http requests besides the form request itself, which means if the background image was not in cache it wouldn't work. Because of this we've taken to preloading the spinner on an Image object in memory.

有趣的是，如果我手动调用更新按钮上CSS的方法开发工具控制台，它工作得很好。只有当我们有实际的提交时，它才会变得不稳定，并且不能吸引到微调器中。另外有趣的是，它不会从提交按钮中删除文本，这是效果的第二部分。

Interestingly, if I manually call the method that updates the CSS on the button from IE dev tools console, it works just fine. It's only when we have an actual submit that it gets stuborn and fails to draw in the spinner. Also interestingly, it does remove the text from the submit button, which is a second part of the effect.

任何人都有什么想法导致这/如何防止它？

Anyone have any ideas on what's causing this/how to prevent it?

这是一个精简版的 live（） d代码，可处理提交：

Here's a slimmed down version of the live()d code that handles the submit:

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;
});

推荐答案

我和ExtJS有类似的问题，你发现有关IE9在表单提交后没有加载任何新图像。

I had a similar issue with ExtJS and discovered exactly what you discovered about IE9 not loading any new images after the form has been submitted.

这是我的解决方法，不需要预加载，虽然承认它有点骇人听闻。 / p>

Here was my workaround that doesn't require preloading, though admittedly it's a little hackish.

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加载，然后我在200毫秒的超时后通过Javascript手动提交表单。

Basically I return false when the form submit event fires, I do all my CSS loading, and then I manually submit the form via Javascript after a timeout of 200 milliseconds.

我希望这有帮助。您是否向Microsoft提交了错误？

I hope that helps. Did you submit a bug to Microsoft?

这篇关于IE9提交时重新绘制CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！