在使用脚本执行 php 时加载微调器图像答案

【问题标题】：Loading spinner image while php is executing using script在使用脚本执行 php 时加载微调器图像
【发布时间】：2014-01-22 12:19:34
【问题描述】：

您好，我正在尝试使用脚本在我的 php 执行时显示加载栏。我从这个website 学到了，但是当我做了完全相同的事情时，我的加载栏仍然无法显示，知道为什么吗？

<html>
   <head>

 <style type="text/css">
   div#content {
   display: none;
  }

div#loading {
   top: 200 px;
  margin: auto;
  position: absolute;
  z-index: 1000;
  width: 160px;
  height: 24px;
  background: url(img/142.gif) no-repeat;
  cursor: wait;
 }
</style>
   <script type="text/javascript">
    function preloader(){
        document.getElementById("loading").style.display = "none";
        document.getElementById("content").style.display = "block";
    }//preloader
    window.onload = preloader;
</script>

<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >

<?php

sleep(10);
echo 'This content has been loaded via an AJAX request';

?>
<br>
</div>
</body>
</html>

【问题讨论】：

style="display: none;">
什么意思？ @卡南
你的 id loading 是 display:none
我删除了，还是不行。
@Kannan
echo 'This content has been loaded via an AJAX request'; - 你在撒谎，它不是......因此这很可能不会按预期工作，因为输出缓冲等东西会妨碍 - 浏览器等到他在显示任何东西之前已经收到了完整的资源。如果你想要一个 AJAX 请求的加载动画，那么制作一个实际的 AJAX 请求来测试它。

标签： javascript php jquery css

【解决方案1】：

只需在任何浏览器中运行此代码

<!DOCTYPE html>
<?php
@ini_set('zlib.output_compression', 0);
@ini_set('implicit_flush', 1);
@ob_end_clean();
set_time_limit(0);
?>
<html>
    <head>
        <style type="text/css">
            div#content {
                display: none;
            }
            img#loading {
                top: 200 px;
                margin: auto;
                position: absolute;
                z-index: 1000;
                width: 500px;
                height: 24px;
                cursor: wait;
                height: 500px
            }
        </style>
        <style type="text/css"></style>
    </head>
    <body>
        <?php
        for ($i = 0; $i < 10; $i++) {
            echo str_repeat(' ', 1024 * 64); // this is for the buffer achieve the minimum size in order to flush data
            if ($i == 1)
                echo '<img id="loading" src="img/142.gif" />';
        }
        ?>
        <div id="content" style="display: block;">
            <?php
            sleep(5);
            echo 'This content has been loaded via an AJAX request';
            ?>
            <br>
        </div>
        <script type="text/javascript">
            function preloader() {
                document.getElementById("loading").style.display = "none";
                document.getElementById("content").style.display = "block";
            }//preloader
            window.onload = preloader;
        </script>
    </body>
</html>

如果您有权访问 php.ini，请在 php.ini 中设置以下配置并删除 @ini_set('zlib.output_compression', 0); @ini_set('implicit_flush', 1);从头开始

output_buffering = Off
implicit_flush = on
output_compression = Off

如果您对输出缓冲感到好奇 click here

【讨论】：

【解决方案2】：

<?php

sleep(1000);//increase sleep time
echo 'This content has been loaded via an AJAX request';

?>

并删除style="display: none;"

【讨论】：