Question

我想做的事情：显示加载的gif或文本...至少在执行php之前和期间显示黑屏。

我尝试了什么。

我已经使用flush（）进行了测试，直到整个php进程完成后我才得到任何结果。我也不是特别喜欢这个概念，但我会采取任何措施。

我正在考虑使用两个页面来完成此任务，尽管当前项目已接近完成，并且需要一些时间来整合分散的html / php代码。

目前我正在做3-simpleXML_load_file（），1-include（），1-file_get_contents（）我有javascript函数绘制来自simpleXML_Load_file（）...

之一的数据

将代码移动到不同的文件，但这是一项艰巨的任务。所以我们就如何继续提出建议或建议。

如果我需要详细说明请问！

谢谢， JT

 <html>
 <head>
 <?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
 $weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');
 ?>
 <script type="text/javascript">

 <!--Plot function-->
 $(function() 
 {
 var d = 
 [
<?php
//Pulling in hourly data to plot temp vs time
$i=0;
$array=array();
while ($i<=100)
{
    echo '['. (strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000) .','.$weather_hourly->data->parameters->temperature->value[$i] .'],';
    $value = $weather_hourly->data->parameters->temperature->value[$i];
    array_push($array,$value);
    $i++;
}
    foreach ($array as $key => $value) 
    { 
                    $value = (string) $value;
                    $min_sec_array[] = $value;
    }
?>

</script>
 </head>
 <body>
 <div id=graph>
 </div>
 </body

Answer 1

您可以通过使用AJAX和多个页面来实现此目的。要做到这一点，第一页不应该进行任何处理，只需将加载图像放在这里。接下来，发出一个AJAX请求，请求完成后，您可以在页面上显示结果或重定向到另一个页面。

示例：

文件1（也必须包含jQuery），将其与加载器动画一起放在正文中：

<script language="javascript" type="text/javascript">
$(function(){
    var mydata = {};
    $.post('/myajaxfile.php', mydata, function(resp){
        // process response here or redirect page
    }, 'json');
});
</script>

更新：这是一个基于您的代码的更完整的示例。这还没有经过测试，需要包含jQuery库，但这应该给你一个好主意：

文件1：file1.html

</head>
 <body>
 <?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
 ?>
 <!-- Include jQuery here! Also have the loading animation here. -->
 <script type="text/javascript">
$(function(){

    $.get('/file2.php?Lat=<?php echo $lat; ?>&Lon=<?php echo $long; ?>', null, function(resp){
        // resp will have the data from file2.php
        console.log(resp);
        console.log(resp['min_sec_array']);
        console.log(resp['main']);

        // here is where you will setup the graph 
        // with the data loaded
        <!--Plot function-->
    }, 'json');

});

</script>


 <div id=graph>
 </div>
 </body
 </html>

文件2：file2.php 我不确定你是否需要$ min_sec_array，但是我让这个例子返回了你之前使用的主要数据。

$lat = $_POST['Lat'];
$long = $_POST['Lon'];
$weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');

//Pulling in hourly data to plot temp vs time
$i=0;
$main = array();
$array=array();
while ($i<=100)
{
    $main[] = array((strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000), $weather_hourly->data->parameters->temperature->value[$i]);
    $value = $weather_hourly->data->parameters->temperature->value[$i];
    array_push($array,$value);
    $i++;
}
foreach ($array as $key => $value) 
{
    $min_sec_array[] = (string) $value;
}


echo json_encode(array(
    'min_sec_array' =>$min_sec_array,
    'main' => $main
));

exit();

?>

Answer 2

如果你希望它在加载后修改页面，我建议不要使用普通的html和php。因为php是服务器端处理，所以它在页面发送给用户之前执行。你需要Javascript。使用Javascript将使页面发送给用户后，可以在DOM树中动态添加或删除html元素。它由用户浏览器执行。

为了更容易入手，我建议使用jQuery，因为有很多关于这些主题的教程。

JQuery

JQuery learning center

一个小例子：

HTML

<head>
    <meta charset="utf-8" />
    <title> </title>
    <script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
</head>
<body>
    <h1>Addition</h1>
    <div id="error_msg"> </div>
    <div id="content">
        <!-- show loading image when opening the page -->
        <img src="images/loading.gif"/>
    </div>
    <script type="text/javascript">
       // your script to load content from php goes here
    </script>
</body>

直到现在，这将是以下内容：

enter image description here

添加以下php文件

<?php

$num1 = $_GET['num1'];
$num2 = $_GET['num2'];

$result = $num1 + $num2;

echo '<p>Calculating '.$num1.' + '.$num2.' took a lot of time, but finally we were able to evaluate it to '.$result.'.</p>'
     .'<p> '.$num1.' + '.$num2.' = '.$result.'</p>';

 ?>

不会改变任何html，但在HTML中添加javascript / Jquery将是静态html和服务器端php之间的一种连接。

$(document).ready(function(){
    $.ajax({        // call php script
        url: 'php/script.php?num1=258&num2=121',
        type:'GET',
        timeout: 500,
        contentType: 'html'
    }).success(function(data){
            // remove loading image and add content received from php 
        $('div#content').html(data);

    }).error(function(jqXHR, textStatus, errorThrown){
            // in case something went wrong, show error
        $('div#error_msg').append('Sorry, something went wrong: ' + textStatus + ' (' + errorThrown + ')');
    });
});

这将更改您的页面以显示加载动画，直到php脚本返回其数据，如：

enter image description here

所以你可以用普通的html设置整个页面，添加一些加载的GIF，调用几个php脚本并更改内容而无需重新加载页面本身。

Answer 3

这对你的问题来说是一种令人讨厌的解决方案...... 但这可以工作：你使用那些 -

ob_start();
//printing done here...
ob_end_flush();

一开始你将创建你的旋转ajax gif ... 然后你做所有你想要的处理和计算...... 在处理结束时，只需回显一个隐藏到你的gif的小脚本......

取决于确切的需求，也许ajax可以是更优雅的解决方案。

Answer 4

在回复您与David Constantine的对话时，您是否尝试过使用ob_flush（）？

ob_start(); 
echo '<img src="pics/loading.gif">'; 
ob_flush();

// Do your processing here

ob_end_flush();

Answer 5

我认为将PHP输出刷新到浏览器没有问题，但更有可能让浏览器开始渲染部分html输出。不幸的是，部分html上的浏览器行为是特定于浏览器的，所以如果你想在任何浏览器中使用相同的东西，那么在其他答案中建议的AJAX解决方案是更好的方法。

但是如果你不喜欢完整的AJAX解决方案增加的复杂性，你可以尝试让你的html输出“很好”，提供一些可以格式化的身体输出，而不需要其余的html输出。这是您的示例代码失败：它花费大部分时间将数据输出到html标头内的脚本标记中。在您的PHP代码实际执行完毕之前，浏览器甚至从未看到正文的开头。如果你首先编写完整的正文，然后在那里添加数据的脚本标记，你就会给浏览器一些东西，至少在等待最终脚本完成时尝试渲染。

我在这里讨论了同样的问题（尽管不是在PHP中）：Stack Overflow question "When do browsers start to render partially transmitted HTML?"特别是，那里接受的答案提供了一个相当少的非AJAX示例来显示和隐藏占位符而html文件没有还没完全装满。

Answer 6

我知道这是一个老问题，但rpnew在page中提供的答案非常清晰，易于根据您的项目要求进行调整。它是AJAX和PHP的结合。

调用PHP脚本的HTML页面PHPAjax.html：

<html>
<head>    
    <script type="text/javascript">
        document.write('<div id="loading">Loading...</div>');

        //Ajax Function
        function getHTTPObject()
        {
            var xmlhttp;
            if (window.ActiveXObject)
            {
                try
                {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {
                    try
                    {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (E)
                    {
                        xmlhttp = false;
                    }
                }
            }
            else
            {
                xmlhttp = false;
            }
            if (window.XMLHttpRequest)
            {
                try
                {
                    xmlhttp = new XMLHttpRequest();
                }
                catch (e)
                {
                    xmlhttp = false;
                }
            }
            return xmlhttp;
        }
        //HTTP Objects..
        var http = getHTTPObject();

        //Function which we are calling...
        function AjaxFunction()
        {
            url='PHPScript.php';
            http.open("GET",url, true);
            http.onreadystatechange = function()
            {
                if (http.readyState == 4)
                {
                    //Change the text when result comes.....
                    document.getElementById("content").innerHTML="http. responseText";
                }
            }
            http.send(null);
        }
    </script>
</head>
<body onload="AjaxFunction()">
</body>
</html>

后台PHP脚本PHPScript.php：

<?php
    sleep(10);
    echo "I'm from PHP Script";
?>

将两个文件保存在同一目录中。从浏览器中打开HTML文件。它将显示“正在加载...”＃39; 10秒后，您将看到消息更改为＆＃34;我来自PHP脚本＆＃34;。

在PHP执行时加载页面

6 个答案: