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

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

javascript php jquery css

Javascript 在php使用脚本执行时加载微调器图像,javascript,php,jquery,css,Javascript,Php,Jquery,Css,嗨，我正试图使用脚本来显示一个加载栏，而我的php正在执行。我从中学到了这一点，但当我做了完全相同的事情时，我的加载条仍然无法显示，你知道为什么吗 <html> <head> <style type="text/css"> div#content { display: none; } div#loading { top: 200 px; margin: auto; position: absolute; z-ind

嗨，我正试图使用脚本来显示一个加载栏，而我的php正在执行。我从中学到了这一点，但当我做了完全相同的事情时，我的加载条仍然无法显示，你知道为什么吗

<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>


分区内容{
显示：无；
}
分区#加载{
顶部：200像素；
保证金：自动；
位置：绝对位置；
z指数：1000；
宽度：160px；
高度：24px；
背景：url（img/142.gif）不重复；
光标：等待；
}
函数预加载程序（）{
document.getElementById（“加载”）.style.display=“无”；
document.getElementById（“内容”）.style.display=“块”；
}//预紧器
window.onload=预加载程序；

然后删除

style=“display:none；”“

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

<!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>

如果您对输出缓冲很好奇，您的意思是什么@Kannany您的id加载为display:noneI删除它，仍然不工作@Kannan

echo“此内容已通过AJAX请求加载”–你在撒谎，它不是…因此很可能无法按预期工作，因为输出缓冲等东西会妨碍–浏览器会等到收到完整的资源后再显示任何内容。如果您想要为AJAX请求加载动画，那么就发出一个实际的AJAX请求来测试它。
<!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>

output_buffering = Off
implicit_flush = on
output_compression = Off