我以前一直在处理这个问题,但似乎问题又回来了。让我解释。
我有一个网页可以让用户上传一个大文件,之后 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,但显然有大约一半的互联网社区仍在使用它。伙计,人们怎么能使用那块 *&^% 呢?无论如何,这不是一个问题 :) 问题是,如何让这个简单的任务在 IE 中工作并让我的动画真正播放?
PS。我一直在使用 IE 9 或 Windows 7 的当前“网络之美”对其进行测试。
编辑:
感谢ShadowScripter,我找到了解决方案。这对我有用:
1 将以下内容添加到 HTML 以确定我们是否在 IE 上运行(因为我们不需要对任何其他 Web 浏览器执行此“破解”):
<![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);
}
}