Question

我有一个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>

Answer 1

如果我的理解正确，您将尝试使动画继续进行，直到页面上传完成。您可以使用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>

Answer 2

通过重定向开始，当前页面中的任何进程都将停止，因此您无法继续gif动画。我的建议是增加您的setTimeout的时间。

html JavaScript在新页面加载时未显示图像

2 个答案: