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

时间:2014-01-22 12:19:35

标签: javascript php jquery css

您好我正在尝试使用脚本在我的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>

2 个答案:

答案 0 :(得分:3)

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

<!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,请在php.ini中进行配置并删除 @ini_set('zlib.output_compression',0); @ini_set('implicit_flush',1);从开始

output_buffering = Off
implicit_flush = on
output_compression = Off

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

答案 1 :(得分:1)

<?php

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

?>

并删除style="display: none;"