交互设计中心-72色

交互设计中心 | 用户体验 | 优化

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

2010年3月16日 | 分类:jquery/javascript | 评论:0 | 引用:0 | | Tags:GIF  IE  动画  
这个问题,怎么说呢,先把症状重复一遍吧:IE显示了图片,但是动画却不能播放。而在FirFox中却能正常的工作。
一直以来,我都以为是浏览器的关系。没有设定好而导致这种情况发生,比如一些在IE核心上开发的浏览器(maxthon)等,都可以把GIF动画关闭的。所以我也就没有仔细研究过。

来看看这个:
IE和FirFox在很多地方都有着或多或少的不同,这导致在开发时需要考虑很多的特殊情况。在最近的项目中居然发现带动画的GIF图片在页面Load之 后再以脚本控制的方式展现时,动画不能表现出来。在我的项目中,需要在点击一个按钮后来显示一个动态的Loading图片以此表示程序正在进行后台处理。 这是通过一段jQuery代码来实现的:
<font size="3" face="Calibri"><script language="javascript" type="text/javascript">function showMessage() {   
        ......   
        $("div#Processing").show();   
        ......   
    }</script>   
<div id="Processing" style="display: none">   
    <center>   
        <img src="placeOrder_processing.gif" />   
    </center>   
</div></font>
E显示了图片,但是动画却不能播放。而在FirFox中却能正常的工作。当你将整个DIV加入到DOM中时,这个DIV是隐藏的,不可见的。但是当你将其 属性设置为可见时,动画却不能被正常播放。如果将带动画的GIF图片直接以可见的形式加入到DOM中,它是可以正确的现实并播放动画的。那么,可以这样更 改代码:
<font size="3" face="Calibri"><script language="javascript" type="text/javascript">   
    function showMessage() {   
          
        $("div#Processing").show();   
        var imgSrc = '<%=ResolveUrl("~/Images/Checkout/placeOrder_processing.gif") %>';   
        $("td#imgSection").append("<img src='" + imgSrc + "'/>");   
           
    }      
</script></font>
这样,在可见的内容中将Img加入到DOM中就可以解决这个问题了。
本文转自:http://www.neatstudio.com/show-1148-1.shtml Share
« 用CSS缩写给你的网站加速IT难,想做蜗居er都难呀 »



◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。