Question

我目前有一个网页需要一段时间才能加载。页面的php端进行了大量的数据处理和计算，并且（不幸的是）这是不可避免的。我想在php处理的同时在页面上显示一些内容。不幸的是，页面的大部分依赖于php计算。

我目前的解决方案如下：

HTML / PHP（开头）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="preLoading.js"></script>
</head>
<body onload="onLoad()">
<?php
flush();
?>
<?php
// computation.
?>

javascript：

document.write('<span id="loading">Please wait... Loading and processing data.</span>');

function onLoad() {
    if (document.getElementById) {
        var loading = document.getElementById("loading");
        loading.style.display="none";
    }
}

在页面呈现时，它的效果很好，在页面呈现时会显示一些等待消息。但是在页面仍然等待渲染任何内容之前接收所有数据的意义上它不起作用。我怎样才能完成后者？

有一点需要注意：doctype之前的空白行包含1024个空格，因为我在某些地方（包括StackOverflow）读取浏览器等到读取一定数量的字符后才尝试渲染任何内容。

任何想法都将不胜感激。浏览器充满了神秘的技巧和黑客，这让我神秘。

Answer 1

更好的选择是只发送页面的骨架，然后通过AJAX调用获取计算昂贵的数据。这样你就可以建立一个占位符页面，并在它们可用时填写。

这样做的好处是你不依赖于刷新缓冲区 - 这不能保证数据实际上会被发送到客户端，只是软件堆栈中的下一个更高层应该获得现在可用的所有内容

缺点是现在你将至少有两个HTTP请求来生成页面 - 一个用于获取页面的骨架，并且至少有一个或多个用于获取“填充空白”的AJAX请求“数据。

Answer 2

尝试使用

flush(); ob_flush();

如php手册中所述。这使输出尽可能靠近浏览器。

有关将缓冲区推送到浏览器的更多信息，请参阅php手册中的flush（）;

Answer 3

首先尝试在body标签后直接放置加载程序消息。这样浏览器应该尽快显示它。
默认情况下，检查配置没有压缩（例如gzip）。
不要使用表格。它们在完全加载之前不会呈现。

Answer 4

试试这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title">Loading</title>

<link href="style.css" rel="stylesheet" type="text/css"/>
<script type ="text/javascript" src="jquery.js"> </script>

<script type="text/javascript">  

$(document).ready(function(){
 $.get('data.php',
 function(output) {
 $('#dataDiv').html(output).fadeIn(250);
 });
});

</script>
</head>
<body>
<div id="dataDiv"> Please wait while loading... </div>
<?php
// computations placed in data.php file
?>

请注意这需要使用jQuery并将您的php计算移动到“data.php”文件。

Answer 5

使用Ajax调用加载永远需要的内容。

Answer 6

您需要关闭输出缓冲并在PHP进程完成其工作时隐式刷新输出。

您可能想要结帐Output Buffering。另请注意，刷新缓冲区取决于浏览器以及显示输出之前的预期值。

您可能觉得有用的related question。

在收到所有数据之前呈现网页

6 个答案: