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 + "'/>");
}
$("#loadingImg").remove(); 如果不删除,再次提交时会有2个图片
loadingDialog.dialog("close");