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

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

01 <font face="Calibri" size="3">function showMessage（） {
02         ......
03         $（"div#Processing"）.show（）;
04         ......
05     }
06
07 <div id="Processing" style="display: none">
08     <center>
09         <img src="placeOrder_processing.gif" />
10     </center>
11 </div></font>

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

01 <font face="Calibri" size="3"><script language="javascript" type="text/javascript">
02     function showMessage（） {
03
04         $（"div#Processing"）.show（）;
05         var imgSrc = "<%=ResolveUrl（"~/Images/Checkout/placeOrder_processing.gif"） %>";
06         $（"td#imgSection"）.append（"<img src="" + imgSrc + ""/>"）;
07
08     }
09
10 </script></font>

1 <font face="Calibri" size="3">这样，在可见的内容中将Img加入到DOM中就可以解决这个问题了。</font>