HTML JavaScript не показывает изображение при загрузке новой страницы - PullRequest
Новая
       0

HTML JavaScript не показывает изображение при загрузке новой страницы

0 голосов
/ 24 сентября 2018

У меня есть HTML-страница, которая показывает анимированное изображение обработки, пока я жду, пока оно перенаправит на новую страницу.

По какой-то причине при запуске страницы перенаправление анимации прекращается.

Цель этого состоит в том, чтобы сделать запрос к сценарию PHP, и после завершения сценария PHP он обрабатывает HTML, и страница перенаправляется.

Можете ли вы помочь справиться с обработкой анимированного изображения, чтобы оно продолжало показывать анимацию, пока я ожидаю завершения перенаправления. 

<!DOCTYPE html>
<html>
<head>
<style>
html { 
  background: url(processing.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}
</style>

<body>
<script>
         setTimeout(function(){
            window.location.href = 'processing.php';
         }, 1000);
      </script>
<div class="bg"></div>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

При запуске перенаправления любой процесс на текущей странице будет остановлен, поэтому вы не сможете продолжить анимацию GIF.я предлагаю увеличить время вашего setTimeout.

0 голосов
/ 24 сентября 2018

Если я правильно понял, вы пытаетесь заставить анимацию продолжаться до завершения загрузки страницы.Вы можете сделать это с помощью PHP-кода, пытаясь обналичить время загрузки, а затем отключить анимацию.

Я пробовал что-то вроде этого: 

<?php

$time_start = microtime(true); 


$time_end = microtime(true);

//dividing with 60 will give the execution time in minutes otherwise seconds
$execution_time = ($time_end - $time_start)/60;

echo 'The process took ' . $execution_time. ' mintues ';

?>
<html>
<head>
<style>
    #bg{ 
     background: url(processing.gif) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: center;
    }
</style>
<script>
         setTimeout(function(){
            var stop = document.getElementById("bg").style.background="0"; //disable the background
         }, <?php echo intval($execution_time) ?>); // echo the int value that took to the process
      </script>
</head>

<body id="bg">



</body>


</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...