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

【问题标题】：Waiting/Loading image or message while PHP loadsPHP 加载时等待/加载图像或消息
【发布时间】：2016-03-16 20:18:17
【问题描述】：

我试图弄清楚如何在 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>

【问题讨论】：

有什么理由不能直接放在jquery/js中吗？
你可以在加载时通过json返回数据，这样如果php没有加载，json就不会返回值，导致系统返回加载图像
Show image while page is loading的可能重复
@pydsigner 我同意，它可能是重复的。但是我已经阅读了该线程，但我不知道如何将其应用于此代码。这可能很容易解决...我希望有人能指出不正确或需要添加的 1-2 行，因为我只是把头撞在墙上。
@StevenDropper 有什么例子吗？

标签： php jquery ajax

【解决方案1】：

已解决！我找到并修改了这个 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>

【讨论】：

【解决方案2】：

这与 PHP 应用的输出缓冲有关。

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

【讨论】：

那么我将如何实现推荐的类似功能？很高兴知道页面正在加载，并且不只是发生了一些错误。

【解决方案3】：

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

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

您是否尝试为 PHP 操作显示加载动画/图像？如果是，那么您绝对应该在单独的操作中使用 Ajax。

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

【讨论】：

您似乎忘记提供您提到的链接
感谢您的提及。它一定是我的想法滑倒了
@Gasim 我愿意使用 Ajax，只是看起来更混乱。我正在寻找一个好的、干净的例子。
@Alex 你需要有两个文件。一个用于html，一个用于php。 html通过ajax加载php文件

【解决方案4】：

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

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

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

然后像这样改变你的淡出脚本：

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

【讨论】：

$.load 是异步的，因此您的代码将在 php 加载之前淡出图像
不幸的是，这并没有比原始代码更好。它在加载之前仍然显示非常简短。
@Alex 这样更好吗？