Question

我试图弄清楚如何在PHP运行时显示图像并在之后消失。

我从一个站点抓取了这个代码，但是图片只在PHP加载的最后很简单地显示。它没有显示页面最初打开的时间，而且似乎只运行一次。

我已经在这里阅读了很多很多网站和线程，但是我无法弄清楚这个简单例子中缺少什么。有一个更好的方法吗？或者这就是它，我只需要解决它？

提前感谢你！

<html>
  <head>
    <title>Home</title> 
  <style>
    /* This only works with JavaScript, 
    if it's not present, don't show loader */
   .no-js #loader { display: none;  }
    .js #loader { display: block; position: absolute; left: 100px; top: 0; }
    .se-pre-con {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_51.gif) center no-repeat #fff;
    }
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
  <script>
    // Wait for window load
    $(window).load(function() {
      // Animate loader off screen
      $(".se-pre-con").fadeOut("slow");;
   });
  </script>

  </head>

  <body>
    <div id="loader" class="se-pre-con"></div>
    <?php
        include 'content/screen.php';
    ?>
  </body>

</html>

Answer 1

PHP始终（除非明确告知不要）在打印之前缓冲输出。这意味着当您实际打印时，PHP只会将输出文本存储在内存中。打印完所有内容后，将打印存储在内存中的内容并刷新内存。这不仅仅是PHP。几乎所有跨多种语言和平台的I / O库都具有此功能，默认情况下通常会启用此功能。

以下是相关链接，其中显示了绕过或禁用此功能的所有可能选项。我个人认为你不应该禁用它，因为图像仍然需要加载，你无法控制PHP加载和图像加载之间的延迟。我认为在这种情况下，参与Ajax的解决方案可能更适合您的需求。

您是否正在尝试为PHP操作显示加载动画/图像？如果是，那么你肯定应该通过单独的动作来使用Ajax。

修改：抱歉没有粘贴链接：How to disable output buffering in PHP

Answer 2

它与PHP适用的输出缓冲有关。

这Stack Overflow link解释了为什么它没有按预期工作，可能的方法使它工作，以及为什么你不应该这样做。

Answer 3

以下是如何将Show image while page is loading应用于您的情况。

用这样的div替换你的php标签：

<div id="main"></div>

然后像这样更改你的fadeout脚本：

<script>
    $(document).ready(function() {
        $("#main").load("content/screen.php", function () {
            // Animate loader off screen
            $(".se-pre-con").fadeOut("slow");
        });
    });
</script>

Answer 4

已解决！我发现并修改了这个AJAX代码，该代码完全符合我的要求（相同的页面加载有多个选项，可以加载什么（通过链接）。感谢所有有用的消息引导我走上正确的道路！这个社区很棒！

<head>
    <title>Demo</title>
<style>
    #fade {
        display: none;
        position:absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #ababab;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .70;
        filter: alpha(opacity=80);
    }
    #modal {
        display: none;
        position: absolute;
        top: 45%;
        left: 45%;
        width: 64px;
        height: 64px;
        padding:30px 15px 0px;
        border: 3px solid #ababab;
        box-shadow:1px 1px 10px #ababab;
        border-radius:20px;
        background-color: white;
        z-index: 1002;
        text-align:center;
        overflow: auto;
    }
</style>
<script>
    function openModal() {
        document.getElementById('modal').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
    }

    function closeModal() {
        document.getElementById('modal').style.display = 'none';
        document.getElementById('fade').style.display = 'none';
    }

    function loadAjax(page) {
        document.getElementById('results').innerHTML = '';
        openModal();
        var xhr = false;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xhr) {
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    closeModal();
                    document.getElementById("results").innerHTML = xhr.responseText;
                }
            }
            xhr.open("GET", "content/"+page+".php", true);
            xhr.send(null);
        }
    }
</script>
</head>
<body>
    <div id="content">
        <a href="javascript: void(0);loadAjax('page1');">Click to load page 1</a><br/><br/>
        <a href="javascript: void(0);loadAjax('page2');">Click to load page 2</a><br/><br/>
        <div id="results"><!-- Results are displayed here --></div>
        <div id="fade"></div>
        <div id="modal">
            <img id="loader" src="loading.gif" />
        </div>
    </div>
</body>
</html>

PHP加载时等待/加载图像或消息

4 个答案: