3

我想要做什么：显示加载 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
4

6 回答 6

9

实现此目的的主要方法是使用 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();

?>
于 2013-06-28T22:26:57.447 回答
4

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

为了更容易开始，我推荐 jQuery，因为有很多关于此类主题的教程。

jQuery

jQuery学习中心

一个小例子：

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>

到目前为止，这只不过是以下内容：

在此处输入图像描述

添加以下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 脚本返回其数据，例如：

在此处输入图像描述

因此，您可以在纯 html 中设置整个页面，添加一些加载 gif，调用多个 php 脚本并更改内容，而无需重新加载页面本身。

于 2013-06-28T22:27:08.243 回答
0

我认为您将 PHP 输出刷新到浏览器没有问题，但更有可能让浏览器开始呈现部分 html 输出。不幸的是，部分 html 上的浏览​​器行为是特定于浏览器的，因此，如果您希望某些东西在任何浏览器中都可以正常工作，那么其他答案中建议的 AJAX 解决方案是更好的选择。

但是，如果您不喜欢完整的 AJAX 解决方案所增加的复杂性，您可以尝试使您的 html 输出“很好”，即提供一些可以格式化的正文输出，而无需其余的 html 输出。这是您的示例代码失败：它花费大部分时间将数据输出到 html 标头内的脚本标记中。在您的 PHP 代码实际上完成执行之前，浏览器甚至不会看到正文的开头。如果您首先编写完整的正文，然后在其中添加数据的脚本标记，则您可以在等待最终脚本完成时为浏览器提供至少尝试呈现的内容。

我发现了这里讨论的相同问题（尽管不是在 PHP 中）：堆栈溢出问题“浏览器何时开始呈现部分传输的 HTML？” 特别是，那里接受的答案提供了一个相当少的非 AJAX 示例来显示和隐藏占位符，而 html 文件尚未完全加载。

于 2013-09-27T15:47:40.440 回答
0

在回复您与下面的 David Constantine 的对话时，您是否尝试过使用 ob_flush()？

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

// Do your processing here

ob_end_flush();
于 2013-06-28T22:46:52.160 回答
0

这是对您的问题的一种讨厌的解决方案...但这可以工作：您与那些-

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

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

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

于 2013-06-28T22:31:50.223 回答
0

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

PHPAjax.html调用 PHP 脚本的 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 文件。它将显示 'Loading...' 10 秒钟，然后您将看到消息更改为“我来自 PHP 脚本”。

于 2016-12-28T15:08:04.290 回答