CODEWITHSUNDEEP
javascriptonloadgifanimated
Jesper
Jesper

Reputation: 999

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 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">

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?

Upvotes: 5

Views: 32558

Answers (5)

Ankit
Ankit

Reputation: 11

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.

Upvotes: 0

Remus
Remus

Reputation: 61

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'
}

Upvotes: 0

Entendu
Entendu

Reputation: 1245

old question, but posting this for fellow googlers:

Spin.js DOES WORK for this use case: http://fgnass.github.com/spin.js/

Upvotes: 12

Nikolas
Nikolas

Reputation: 21

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(); ...

Upvotes: 2

Atticus
Atticus

Reputation: 6720

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);

Upvotes: 0

Related Questions