Rendering webpage before all data is received

Question

I currently have a webpage that's taking a while to load. The php side of the page does a lot of data processing and computation, and that's (unfortunately) unavoidable. I would like to display something on the page while the php is processing. Unfortunately, the majority of the page depends on the php computation.

The current solution I have is the following:

The HTML/PHP (beginning):

<!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.
?>

The 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";
    }
}

It works well in the sense that while the page is rendering, there's a little waiting message displayed while the page renders. But it does not work in the sense that the page still waits for all the data to be received before rendering anything. How can I accomplish the latter?

One thing of note: the blank line before the doctype contains 1024 spaces, because I read in some places (including StackOverflow) that browsers wait until reading a certain number of characters before attempting to render anything.

Any ideas would be appreciated. Browsers are filled with arcane tricks and hacks that mystify me.

score 4 · Answer 1 · answered Jul 25 '11 at 19:38

A better choice would be to have only the page's skeleton sent out, and then fetch the computational expensive data via AJAX calls. That way you can put up a placeholder page and fill in things as they become available.

The upside of this is that you're not dependent on flushing buffers - which do not guarantee that the data will actually be sent to the client, only that the next higher layer in the software stack should get everything that's available right now.

The downside is that now you'll have at least two HTTP requests to generate the page - one to fetch the page's skeleton, and at least one or more for the AJAX request(s) to fetch the "fill in the blanks" data.

score 1 · Answer 2 · answered Jul 25 '11 at 19:35

1

Try using

flush(); ob_flush();

as stated in the php manual. This brings the output as close to the browser as possible.

More information about pushing the buffer to the browser can be read in the php manual for flush();

answered Jul 25 '11 at 19:35

Wulf

3,878
2
22
36

`ob_flush()` has no effect when output buffering is off, and there's no indication in the question that it would be on. – phihag Jul 25 '11 at 19:39

score 1 · Answer 3 · answered Jul 25 '11 at 20:00

1

For the beginning try placing the loader message straight after body tag. This way browser should display it asap.
Check configuration for not having compression (e.g. gzip) on by default.
Don't use tables. They are not rendered before fully loaded.

answered Jul 25 '11 at 20:00

Edgar Zagórski

1,509
11
14

score 1 · Accepted Answer · answered Jul 25 '11 at 20:28

Try this:

<!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
?>

Please note this requires the use of jQuery and you to move your php computations to the "data.php" file.

Thanks, this is what I ended up doing (slightly altered). – gnkdl_gansklgna Jul 27 '11 at 19:53 — gnkdl_gansklgna, Jul 27 '11 at 19:53

score 0 · Answer 5 · answered Jul 25 '11 at 19:36

0

Load the content that takes forever with an Ajax call.

answered Jul 25 '11 at 19:36

epascarello

204,599
20
195
236

score 0 · Answer 6 · edited May 23 '17 at 11:55

0

You need to turn output buffering off and implicitly flush output as your PHP process does its job.

You might want to checkout Output Buffering. Also note that flushing the buffer is dependent on the browser and how much it expects before it shows output.

A related question that you might find useful.

edited May 23 '17 at 11:55

Community

1
1

answered Jul 25 '11 at 19:36

Abs

56,052
101
275
409

A flush isn't enough - you have to check if output buffering is on or off in your PHP.ini file. See this comment in the php manual: http://www.php.net/manual/en/function.flush.php#99988 – Abs Jul 25 '11 at 19:40

Rendering webpage before all data is received

6 Answers6