在 php 页面中实现加载 div 无效

Question

我有一个 php 页面，它计算页面加载过程很长。我试图用 js 实现 "waiting div" - 但是页面仍在等待 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>

有人知道为什么 "loading" 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 计算完成并发送一个 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 无效

Implementing loading div in a php page not working

javascript

php

jquery

loading

pageload