March 25th, 2004, 04:32 AM
|
|
Registered User
|
|
Join Date: Mar 2004
Posts: 8
Time spent in forums: < 1 sec
Reputation Power: 0
|
|
|
HowTo: Progressive Loading.
Hi all. I recently added this neat little feature to a page I did that queries 3rd party servers and reports back with information. Since it queries other peoples servers, there could be a lot of wait time. It was very ugly having the entire page flash up 15 seconds later.
So I needed a way to have the page load progressively, but my page layout didn't let me just flush() periodically, as closing table tags where not there. It needed to work on IE and Mozilla atleast.
Solution? Javascript and flush() in PHP. I have had some requests for people wanting to do this, so here it is.
PHP Code:
<?
$data = array("data 1", "data 2", "data 3", "data 4");
echo "<table width=50% align=center border=1>";
for($i=0; $i<count($data); $i++){
echo "<tr><td id=\"data_$i\" style=\"background: #FFFFAA\">Connecting..</span></td></tr>";
}
echo "</table>";
flush();
for($i=0; $i<count($data); $i++){
if($i == 2){
echo "
<script>
document.getElementById('data_$i').innerHTML = '<font color=#FF0000>Server Down</font>';
document.getElementById('data_$i').style.backgroun d = '#FFAAAA';
</script>
";
}else{
echo "
<script>
document.getElementById('data_$i').innerHTML = '$data[$i]';
document.getElementById('data_$i').style.backgroun d = '#AAFFAA';
</script>";
}
flush();
sleep(1); // simulate lag
}
?>
|
Dev Articles Community Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
