带动画的GIF图片在IE中不能正常工作

IE和FirFox在很多地方都有着或多或少的不同，这导致在开发时需要考虑很多的特殊情况。在最近的项目中居然发现带动画的GIF图片在页面Load之后再以脚本控制的方式展现时，动画不能表现出来。在我的项目中，需要在点击一个按钮后来显示一个动态的Loading图片以此表示程序正在进行后台处理。这是通过一段jQuery代码来实现的：

var loadingDialog = $('<div id="dialog" title="" width="100%"><p class="center" id="imgSection"><img id='loadingImg' src='~/Image/header_logginginAction.gif'></p><br/><p class="center">正在提交数据...</p></div>');
function bsl_showLoadingDialog(title) { //此处是一个遮罩效果
loadingDialog.dialog({
modal: true,
title: title,
width: 400,
height: 300,
closeOnEscape: false,
resizable: false
});
loadingDialog.parent().find('.ui-dialog-titlebar-close').hide();
}

IE显示了图片，但是动画却不能播放。而在FirFox中却能正常的工作。当你将整个DIV加入到DOM中时，这个DIV是隐藏的，不可见的。但是当你将其属性设置为可见时，动画却不能被正常播放。如果将带动画的GIF图片直接以可见的形式加入到DOM中，它是可以正确的现实并播放动画的。那么，可以这样更改代码：

var loadingDialog = $('<div id="dialog" title="" width="100%"><p class="center" id="imgSection"></p><br/><p class="center">正在提交数据...</p></div>');
function bsl_showLoadingDialog(title) { //此处是一个遮罩效果
loadingDialog.dialog({
modal: true,
title: title,
width: 400,
height: 300,
closeOnEscape: false,
resizable: false
});
loadingDialog.parent().find('.ui-dialog-titlebar-close').hide();
var imgSrc = '<%=ResolveUrl("~/Image/header_logginginAction.gif") %>';
$("#imgSection").append("<img id='loadingImg' src='" + imgSrc + "'/>");
}

若页面刷新则页面重新render，遮罩层也不用再处理，若页面采用无刷新ajax，需要在接受到服务器端返回信息后操作遮罩层：

$("#loadingImg").remove(); 如果不删除，再次提交时会有2个图片
loadingDialog.dialog("close");

 

转载于:https://www.cnblogs.com/MadMing/archive/2013/04/24/3040694.html