Javascript 加载页面时的动画 GIF 没有动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5829382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animated GIF while loading page does not animate
提问by Jesper
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:
我有一个使用 asp.net (C#) 在服务器端生成的页面。页面加载需要一段时间，因为它有多达 100 个 iframe。我想在页面加载时显示“请稍候”动画 gif，所以我有以下内容：
<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">
So the problem is that the loading gif is not moving. I have tried to use
所以问题是加载gif没有移动。我试过用
setTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);
too, and it made the gif move "a little", but not as intended.
也是，它使 gif 移动了“一点”，但不是预期的。
How can I make it animate un-interrupted during load?
我怎样才能让它在加载过程中不间断地动画？
回答by Entendu
old question, but posting this for fellow googlers:
老问题，但为其他谷歌员工发布：
Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/
Spin.js 确实适用于此用例：http://fgnass.github.com/spin.js/
回答by Nikolas
I got a similar problem and found a pretty easy solution - my markup looks somewhat like this:
我遇到了类似的问题，并找到了一个非常简单的解决方案 - 我的标记看起来有点像这样：
<li><a href="#" onclick="this.parentNode.className = '_indicator'; doSomething();">Foo</a></li>
The CSS-Class is assigning an animated gif to the background of that li-element. This works great, but the image is not moving. Applying "focus()" to the li afterwards solves this:
CSS-Class 正在为该 li 元素的背景分配一个动画 gif。这很好用，但图像不动。之后对 li 应用“focus()”可以解决这个问题：
<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
回答by Remus
have you tried setInterval()? setTimeout only runs once while setInterval is continuously run until stopped.
你试过setInterval()吗？setTimeout 只运行一次，而 setInterval 会持续运行直到停止。
var x = setInterval(document.getElementById('loadinggif').src = 'graphics/loading.gif', 100);
... when done loading ....
...加载完成后....
clearInterval(x);
although, now that i think about it, all your code is doing is setting the image source to the animated gif. the real problem is that IE seems to be "locked" when doing a lot of jScript processing in the background and doesn't run animations.
虽然，现在我考虑一下，您的所有代码所做的就是将图像源设置为动画 gif。真正的问题是 IE 在后台进行大量 jScript 处理并且不运行动画时似乎被“锁定”了。
you could try to have all the gif's in the animation as seperate files and then use the interfval function to change the src to mimic the same animation.
您可以尝试将动画中的所有 gif 作为单独的文件，然后使用 interfval 函数更改 src 以模仿相同的动画。
maybe somehting like this...
也许像这样......
//global var
var imgIndex = 0;
var x = setInterval(changeImgSrc, 100);
... when done loading ....
...加载完成后....
clearInterval(x);
function changeImgSrc(i){
document.getElementById('loadinggif').src = 'graphics/loading' + (imgIndex++) + '.gif'
}
回答by Atticus
setTimeout(function(){document.getElementById('loadinggif').src = 'graphics/loading.gif'}, 100);
include it as a function and watch your quotations
将其作为函数包含并观看您的报价
You may want to do it like this. Declare the src in the html but have it hidden, then perform:
你可能想这样做。在 html 中声明 src 但将其隐藏，然后执行：
setTimeout(
function() {
document.getElementById('loadinggif').style.display ='block';
setTimeout(
function() {
document.getElementById('loadinggif').style.display = 'none';
}, 100);
}, 100);
回答by Ankit
You can just set backgroung CSS property to contain the gif image u want to display during the animation.
您可以只设置背景 CSS 属性来包含您想要在动画期间显示的 gif 图像。
background: rgba( 198, 226, 255, .5 )
url('images/15.gif')
50% 50%
no-repeat;
.5 indicates the opacity; in URL part you can give relative or complete URL for your gif image.
.5 表示不透明度；在 URL 部分，您可以为 gif 图像提供相对或完整的 URL。
