Animated GIF while loading page does not animate
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 th开发者_Go百科e 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">
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);
too, and it made the gif move "a little", but not as intended.
How can I make it animate un-interrupted during load?
old question, but posting this for fellow googlers:
Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/
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:
<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
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:
setTimeout(
function() {
document.getElementById('loadinggif').style.display ='block';
setTimeout(
function() {
document.getElementById('loadinggif').style.display = 'none';
}, 100);
}, 100);
have you tried setInterval()? setTimeout only runs once while setInterval is continuously run until stopped.
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.
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.
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'
}
You can just set backgroung CSS property to contain the gif image u want to display during the animation.
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.
加载中,请稍侯......
精彩评论