随笔 - 58  文章 - 0  评论 - 250 

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

function showMessage() {
        ......
        $("div#Processing").show();
        ......
    }

<div id="Processing" style="display: none">
    <center>
        <img src="placeOrder_processing.gif" />
    </center>
</div>

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

<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>
这样,在可见的内容中将Img加入到DOM中就可以解决这个问题了。
posted on 2010-03-15 17:24 Allan. 阅读(1372) 评论(5) 编辑 收藏

比较常见的问题是 你已经在a里面用了 href="javascript:xxx()"了ie认为你已经离开此页面了 所以不再播放动画
 回复 引用 查看   
#2楼 2010-03-15 21:38 | 紫色永恒      
牛x的<FONT size=3 face=Calibri>
 回复 引用 查看   
#3楼 2010-03-16 18:06 | sohighthesky      
ie为了节省资源不渲染不可见的图片吧
 回复 引用 查看   
#4楼 2010-03-17 08:43 | 专注C#      
兄弟:我没有用jQuery,那该如何写呢?
 回复 引用 查看   
#5楼[楼主] 2010-03-17 16:13 | Allan.      
@专注C#
那就是标准的Javascript呗。假设这是一段HTML:
<div id="WaitNote" style="display:none" >
<p>&nbsp;</p>
<table height="300" border="1" cellpadding="25" align="center">
<tr><td valign="center" class="gridalternate">
<p><center><img id="WaitImage" src="images/pleasewait.gif">
<span style="font-size:12pt;font-weight:bold;">
We're processing your credit card.
</span><br>
This process may take a few seconds, so please be patient.
</center>
</p>
</td></tr></table>
</div>

那就可以这么些:
function ShowWaitDisplay()
{
document.getElementById('MainForm').style.display='none';
document.getElementById('WaitNote').style.display='inline';
Img = document.getElementById('WaitImage');
Img.style.display="inline";
Img.src = "images/pleasewait.gif";
window.scrollTo(0,0);
return true;
}