javascript - 刷新页面以停止在PHP中加载GIF动画(javascript)

我有一个GIF动画，它将显示何时提交表单，但是，成功执行php脚本时； gif动画不会停止...我尝试执行包含'index.php'的操作，但是仍然无法正常工作，您能帮我怎么做吗？

javascript中的GIF动画函数称为ShowLoading（）

这是我的html代码：

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>

 <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <linkrel="stylesheet"href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
 <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 </head>


    <script type="text/javascript">
function ShowLoading(e) {
    var div = document.createElement('div');
    var img = document.createElement('img');
    img.src = 'buffer.gif';
    div.innerHTML = "<p style='color:red;'>Generating report... This might take a while..</p><br />";
    div.style.cssText = 'position: absolute; bottom: 250px; left: 35%; z-index: 5000; width: 422px; text-align: center';
    div.appendChild(img);
    document.body.appendChild(div);
    return true;
    // These 2 lines cancel form submission, so only use if needed.
   // window.event.cancelBubble = true;
    e.stopPropagation();
   location.reload();
}


  </script>

     <body>
      <br />

      <form method ="POST" action="/phpexcelsample/download.php" onsubmit="return checkURL();">




<center>
    <div class="parent_div">

    <p>Date From: <input type="text" class ="textbox" id="datepicker" value="<?php echo date("Ymd"); ?>" name="datepicker" readonly="True" > &emsp;  Date To:<input type="text" class ="textbox" id="datepicker1" value="<?php echo date("Ymd"); ?>" name="datepicker1" readonly="True" > </p>

            <br />
            <br />

            <input type="submit" class = "generate" name="submit" value="GENERATE REPORT" onclick="ShowLoading()" <?php if(isset($_POST['submit'])) echo 'disabled="disabled"'; ?> > <br />

    </div>
          </center> <br />

</body>

</html>

这是我的PHP代码：

这是一个使用PHPexcel的冗长的php代码，我只显示最后几行或PHPExcel的输出，包括include'index.php';

 header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="Result.xls"');
header('Cache-Control: max-age=0');
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel5');
$objWriter->save('php://output');

include 'index.php';

最佳答案

如果我正确理解了您的问题，则您想在单击表单上的GENERATE REPORT按钮时显示“正在加载”指示符，因为/phpexcelsample/download.php将需要大量时间才能运行。您处在正确的轨道上，但是您需要摆脱以下两行：

e.stopPropagation();
location.reload();

一旦/phpexcelsample/download.php完成运行，它将使用新内容更新浏览器窗口，从而消除“正在加载”指示符。（这假设/phpexcelsample/download.php将所需的结果页面写入浏览器。）

关于javascript - 刷新页面以停止在PHP中加载GIF动画(javascript)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45249880/