Question

我有一个php页面，用于计算页面加载时的长进程。我试图实现一个等待div＆＃34;使用js - 但页面仍在等待php计算完成，并且在计算时不显示加载div。这是我的代码元素顺序：

<!DOCTYPE html>
<html>
 <head>
        <meta charset="utf-8" />
        <title>My site</title>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

        <link rel="stylesheet" type="text/css" href="/css/style.css">
     <style>
         #load_screen{
             background: #000;
             height: 1600px;
             width: 100%;
         }
         #loading{
             color: #fff;
         }
     </style>

  </head>
  <body>
      <div id="load_screen">
          <div id="loading">calculating path</div>
      </div>
<?php 


 //my php calculation and DB calls
    ?>
    <div id="container" class="container">
</div>
<script>
window.addEventListener("load", function ()
{
var load_screen = document.getElementById("load_screen");
document.body.removeChild(load_screen);
});
</script>

任何人都知道为什么＆＃34; loading＆＃34; div现在正在显示并等待php页面完全加载？

Answer 1

在您的情况下，这有点不可能。但是，当你使用jQuery时，坚持使用jQuery。替换以下脚本：

<script>
window.addEventListener("load", function ()
{
var load_screen = document.getElementById("load_screen");
document.body.removeChild(load_screen);
});
</script>

使用：

$(document).ready(function () {
  $("#load_screen").remove();
});

以上两种方法用于页面加载，而不是用于完成PHP计算。您应该在完成时触发或回调，然后通过删除加载屏幕附加该事件。因此，如果你的PHP计算完成并发送一个带有true的AJAX响应，那么你可以删除加载屏幕。

$.get("calculate.php", function (res) {
  if (res == "ok")
    $("#load_screen").remove();
});

我现在假设PHP文件有类似的东西。 calculate.php的来源：

<?php
  sleep(5);
  die("ok");
?>

使用上述两个脚本时，PHP的延迟时间为5秒（显式）。 5秒后，加载屏幕将被删除！

在php页面中实现加载div无法正常工作

1 个答案: