Переадресация анимированных GIF Javascript - PullRequest
Новая
       8

Переадресация анимированных GIF Javascript

0 голосов
/ 07 марта 2012

У меня есть следующий код и возникла следующая проблема:

Я хотел бы иметь анимированный GIF-файл, который будет отображаться при загрузке страницы.через 3 секунды я хотел бы отключить GIF и показать сообщение, которое сохраняется в сеансе.

, чтобы понять, что у меня есть следующий счетчик.Моя проблема в том, что я не знаю, как позволить GIF исчезнуть и ввести MSG Div.Могли бы некоторые помочь мне.большое спасибо 

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

хорошо, теперь я получил этот код, но он все еще не работает: 

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

Ответы [ 3 ]

1 голос
/ 07 марта 2012

Вы должны добавить его в качестве переменной. 

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.

Я бы также рекомендовал использовать jQuery для расширения опций и ужесточения. 

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
}

Убедитесь, что установлена ​​.loadingдля отображения: блок, и .msg установлен для отображения: нет.

1 голос
/ 07 марта 2012

Вы можете использовать отображение CSS: нет / блок 

<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>
1 голос
/ 07 марта 2012

Например, изначально установите 

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

затем измените CSS с помощью JavaScript в вашей функции downcount 

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