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

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

最佳答案

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

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

关于javascript - 在使用脚本执行 php 时加载微调器图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21282790/

相关文章:

javascript - 如何使我的滚动流畅?

php - 将动态 jQuery post 传递给 PHP

javascript - 当外部组件未知时使左右边距相等

php - 统计mysql中的所有值

javascript - 如何显示警告框?

jquery - 动态定义 jqGrid

javascript - 如何在 vue.js 的 v-model 中正确应用三元运算符?

javascript - 产品点击 Odoo PoS 功能

javascript - 第一次点击时函数不执行

php - 查询不工作 - INSERT INTO