html JavaScript 在新页面加载时不显示图像答案

【问题标题】：html JavaScript is not showing image as new page loadshtml JavaScript 在新页面加载时不显示图像
【发布时间】：2018-09-26 13:47:30
【问题描述】：

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

【问题讨论】：

当您重定向时，包括图像在内的任何数据加载都会停止。改用 Ajax
当下一页开始加载时，你真的无法控制它......

标签： javascript php html css image

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：