Question

我以前一直在处理这个问题，但似乎问题又回来了。让我解释一下。

我有一个允许用户上传大文件的网页，之后ASP.NET服务器端脚本可能还需要几秒钟来处理它。与此同时，我想在Web浏览器中显示加载器/微调器动画，以防止用户再次单击“提交”按钮。

我使用了以下JQuery代码：

$('#ButtonImportData').click(function () {
    $('.importSubmitSpinner').css('display', 'inline');
}

这是微调器图像的HTML：

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" />

这里是CSS：

.importSubmitSpinner
{
    margin: 0px 10px 0px 6px;
    width: 28px;
    height: 28px;
    display: none;
}

spinner_big.gif是一个简单的GIF文件，带有动画，可以向用户发出正在加载页面的信号。

上述方法适用于几乎所有浏览器，除了...猜哪一个？是的，IE！在IE中发生的事情是，在用户单击ButtonImportData按钮后，显示微调器，但动画立即停止，基本上给用户一个错误的指示，表明页面被挂起，提示他们再次点击提交 - 与我的相反想做。

我很久以前就停止使用IE了，但很明显大约有一半的互联网社区仍在使用它。伙计，人们怎么能用那块*＆amp; ^％？无论如何，这不是一个问题:)问题是，如何让这个简单的任务在IE中工作，让我的动画真正发挥？

PS。我一直在用IE 9测试它，或者用于Windows 7的当前“网络之美”。

修改

感谢ShadowScripter，我找到了解决方案。这对我有用：

1将以下内容添加到HTML中以确定我们是否在IE上运行（因为我们不需要为任何其他Web浏览器执行此操作“hack”）：

<![if !IE]>
<script type='text/javascript'>
var bNotIE = 1;
</script>
<![endif]>

2我们需要在img元素中添加ID：

<img src="Graphics/spinner_big.gif" width="28" height="28" class="importSubmitSpinner" alt="Spinner" id="imgSpinnerImport" />

3然后显示GIF动画：

$('#ButtonImportData').click(function () {
    //For "normal" browsers
    $('.importSubmitSpinner').show();

    if (typeof (bNotIE) == 'undefined') {
        //The following must be done only in case of IE
       //NOTE: We need to load the same file but with a different name
       //   because if you don't change the file name it won't work!
        setTimeout('document.images["imgSpinnerImport"].src = "Graphics/spinner_big_ie.gif"', 200);
    }
}

Answer 1

我似乎无法在任何IE版本中复制您的问题。

Here's the live example我测试了它。

为什么你的工作不起作用可能有很多不同的原因。

其他代码可能会干扰
GIF图片有问题
客户端计算机;工作量

哦，还有，

您可以使用.show()而不必执行.css("display", "inline")事如果没有指定，JQuery可以识别元素应该具有的默认显示模式。

Answer 2

试试这个效果很好......

setTimeout(function() {
     ('.out').css("display","none");    
     $('#load').show();         
     return true;
}, 100);

延迟了100ms defore实际显示加载器图像。

在IE中提交动画问题

2 个答案: