Home/ Questions/Q 7635875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:32:10+00:00

i have the following code and got the following problem: i would like to

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0