Javascript animated gif forwarding

问题

i have the following code and got the following problem:

i would like to have an animated gif to show up on loading a page. after 3 seconds i would like to disable the gif and show a message that is stored in a session.

to realise that i have the following counter. my problem is that i dont know how to let the gif disappear and bring in the msg div. could some please help me out. thanks alot

<body>

<script type="text/javascript">
  var counter = 3;                          
  var url ="";    
  function downcount() {
    document.getElementById('digit').firstChild.nodeValue = counter ;
    if (counter == 0 ) {
      window.location.href=url;
    } else {
      counter--;
      window.setTimeout('downcount()', 1000);
    }
  }
  window.onload=downcount;
</script>

<div class="loading">
  <img src="loading/loading40.gif" 
</div>

<div class="msg">
<?PHP echo $_SESSION['msg'];?>
</div>

ok, now i got that code but it´s still not working:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 

<style>
.loading { display: block; }
.msg { display: none; }
</style>
</head>

<body>

<script type="text/javascript">
 var counter = 3;                          
 var url ="";   
 var loadingGif = function(){
  document.getElementsByClassName('loading').style=display:none;
  document.getElementsByClassName('msg').style=display:block;
  }
  setTimeout('loadingGif()', 3000);
  window.onload=loadingGif();
 var loadingGif = function(){
    $(".loading").delay(3000).animate({ opacity: 0 }, '100', function(){
    $(".msg").css({"display" : "block" });
    }); 
    window.onload=loadingGif();}
 function downcount()
  {
  document.getElementById('digit').firstChild.nodeValue = counter ;
  if (counter == 0 )
  {
  window.location.href=url;
  }else{
  counter--;
  window.setTimeout('downcount()', 1000);
  }
  }
  window.onload=downcount;
  window.onload=loadingGif();
</script>

<div class="loading">
    <img src="loading/loading40.gif" />
</div>

<div class="msg">
    <?php echo $_SESSION['message']; ?>
</div>

回答1:

You should add it as a variable.

var loadingGif = function(){
  document.getElementsByClassName('loading').style=display:none;
  document.getElementsByClassName('msg').style=display:block;
}
setTimeout('loadingGif()', 3000); //change the opacity of the loading gif to 0 after 3 seconds, and then load the message block.

I would also recommend using jQuery to expand options and tighten things up.

var loadingGif = function(){
 $(".loading").delay(3000).hide('100', function(){
   $(".msg").css({"display" : "block" });
 }); //after 3 seconds animate the div to display:none; in 1/10th of a second
}

Make sure that .loading is set to display:block, and .msg is set to display:none.

回答2:

For example, initially, set

.visible { display: block; }
.hidden { display: none; }


<div id="loading" class="visible">
    <img src="loading/loading40.gif" />
</div>

<div id="message" class="hidden">
    <?php echo $_SESSION['message']; ?>
</div>

then change the css via javascript in your downcount function

function downcount(){
    document.getElementById('loading').className = 'hidden';
    document.getElementById('message').className = 'visible';
}

回答3:

You can use the CSS display:none/block

<body>

<script type="text/javascript">
var counter = 3;                          
var url ="";    
function downcount() {
  document.getElementById('digit').firstChild.nodeValue = counter ;
  if (counter == 0 ) {
    document.getElementById('loading').style.display = 'none';
    document.getElementById('msg').style.display = 'block';
  } else {
    counter--;
    window.setTimeout('downcount()', 1000);
  }
}
window.onload=downcount;
</script>

<div id="loading">
  <img src="loading/loading40.gif" 
</div>

<div id="msg" style="display:none">
   <?PHP echo $_SESSION['msg'];?>
 </div>

</body>

来源：https://stackoverflow.com/questions/9597788/javascript-animated-gif-forwarding

标签

javascript

image

forwarding