GIF动画在加载网页没有动画 [英] Animated GIF while loading page does not animate
问题描述
我有一个正在使用asp.net（C＃）生成服务器端的页面。这需要一段时间的页面加载，因为它拥有高达100内部框架。我想显示请稍候动画GIF，而页面加载，所以我有以下几点：
I have a page which is being generated serverside using asp.net (C#). It takes a while for the page to load as it has up to 100 iframes. I want to show a "please wait" animated gif while the page is loading, so I have the following:
<style type="text/css">
#blackout
{
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
position:absolute;
background-color:#222233;
z-index:50;
left:0px;
top:0px;
right:0px;
bottom:0px;
width:102%;
height:102%;
}
#loading
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
position:fixed;
text-align:center;
background-color:#EEEEEE;
top:50%;
left:50%;
margin-top:-55px;
margin-left:-75px;
width:150px;
height:75px;
z-index:100;
}
</style>
</head>
<body onload="document.getElementById('loading').style.visibility='hidden';document.getElementById('loading').style.display='none';document.getElementById('blackout').style.visibility='hidden';document.getElementById('blackout').style.display='none';">
<div id="blackout">
<div id="loading"><img id="loadinggif" src="graphics/loading.gif" alt="" style="margin-top:12px; "/><br />Please wait...</div>
<script type="text/javascript" language="javascript">
document.getElementById('loadinggif').src = 'graphics/loading.gif';
</script>
</div>
<form id="form1" runat="server">
因此，问题是，加载GIF不移动。我曾尝试使用
So the problem is that the loading gif is not moving. I have tried to use
setTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);
太，也取得了GIF动三多一少，但并不如预期。
too, and it made the gif move "a little", but not as intended.
怎样才能使它动画加载过程中未中断？
How can I make it animate un-interrupted during load?
推荐答案
老问题，但这种张贴同胞的Google：
old question, but posting this for fellow googlers:
Spin.js不工作对这种用例：
http://fgnass.github.com/spin.js/
Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/
这篇关于GIF动画在加载网页没有动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
