Page is loading screen

torsoboy

I am trying to figure out how people make a "loading" page appear as their real page is gathering the info and loading in the background. Some people even have a little progress bar to show how far the page has loaded. Any ideas?

daphreeek

i had a similar thing on an old site i did. the way i did it was using javascript to preload the images/files and as it did this i displayed a progress bar in a layer which covered the entire site.

Its reasonably easy to do. Take a look at http://www.javascript.com and there may b a script for you to get some ideas from.

The attatched file does a similar thing - it preloads images and then redirects you to the page with the images on - it's where i got my ideas from (i didn't make it tho).

Hope that helps
- Matt

torsoboy

Thanks for the post, it was almost what i was looking for, but most of the pages i load have little to no image files, but are comprised of data manipulated to look certain ways.

So what happens is a person goes to the page, requests are made to the database, stored procedures are run and they return data back to the php page. in php the data is manipulated to look certain way and then the page is displayed.

I would like to have a page showing the progress or even a simple "The page is loading" screen as the data is being received and manipulated.

Any more ideas?

PyroX

http://www.google.com/search?hl=en&lr=&ie=UTF-8&oe=UTF-8&safe=off&q=javascript+progress+indicator&btnG=Google+Search

daphreeek

well if it isnt many images and just text then a status indicator isn't required at all (in my opinion) as text doesnt take that long to download (unless its really really long - but in that case its better to make several pages).

If you're worried about PHP/MySQL taking ages to manipulate the page, don't! 🙂 Its all done before it is even sent to the viewer. It is all done server side so it takes a few microseconds (normally). There is no more bandwidth used than the same data shown on a normal HTML page.

Unless you have a large amount of images, then don't worry about a status bar.

Matt

torsoboy

Well daphreeek, i wish you were right that it doesn't take long for php and mysql to manipulate and gather the data but as it stands, you're wrong. I have queries that are optimized at 45 seconds to 2 minutes a peice and then the PHP has to do it's FOR LOOPs and IF statements after the data is generated. the database is huge and there are hundreds of tables with thousands of rows of data in each table. It takes quite a while to look through it all for specific information and then join tables together to get the right data back. that is why i need the "your page is loading..." screen. To give some input to the viewer that the system hasn't hung and that the page is still loading.

i found some good stuff on the link from PyroX, but if anyone else has any good ideas, i would be glad to hear them.

Thanks.

matjaz

45 sec to 2 minutes? hey, you must me missing something... or you dont have correct indexes or youre doing 100 queries per page. so far i managed to do everything with 2 queries per php script, SOMETIMES three...

there is always a way to experiment, like: add static things/data to an include file, use first query to load values in an array and later use this array to combine with next query, etc.

torsoboy

okay, if you don't understand why the page takes a long time to load that's okay. the question I asked was about a "loading" screen as the page loads. Thanks for your input though.

PyroX

Here is what I have done before, but it is not 100% perfect in all cases.

lets say you have:

RUN QUERY PARSE DATA

for(whatever){

 for(whatever2){
 query();

 }

?>
<SCRIPT>
document.divname.width=<? echo $newpixwidth; ?>;
<?
flush();
flush();
}
?>

and then a <div> 's laid out like a progress bar
so as it runs, it flushes output, and the width of 1 div inside another moves. The end effect looks pretty good most of the time.

If your just talking about 1 query that takes ages, there isn't really a good way to do it, unless you hand the process off to a daemon and just have a fake progress bar that is timed for 1 minute.

PyroX

Here is my example:
www.phptoolbox.org/progress.php

This works in IE, and NN 4.x , I am not sure about other browsers.

( It needs some more work, especially for netscape, but it does function.)

<SCRIPT LANGUAGE="JavaScript">
var winW;
var winH;
var ns4;
var ie4;
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
//'winW = (ns4)? window.innerWidth-16 : document.body.offsetWidth-20
//'winH = (ns4)? window.innerHeight : document.body.offsetHeight
</SCRIPT>

<CENTER>
<TABLE bgcolor=#000000 border=0 cellspacing=1 cellpadding=0>
<TR><TD>
<TABLE bgcolor=#cccccc border=0 cellspacing=1 cellpadding=0 width=300 align=center>
<TR><TD bgcolor=#51029><CENTER><FONT COLOR=#eeeee><B>Progress</B> </TD></TR>
<TR><TD><CENTER>
<BR>
<DIV STYLE="width=250;height=20;background=#000000"></CENTER>
<DIV ID=divProgress STYLE="width=1;height=15;background=#ff0000">
</DIV>
</DIV>
<BR>
<CENTER>
<SCRIPT>
document.write('<LAYER LEFT='+((winW/2)-125)+' NAME=layProgress WIDTH=0 HEIGHT=140 BGCOLOR=#0000FF></LAYER>')
</SCRIPT>
</TD></TR></TABLE>
</TD></TR></TABLE>

<?
for($x=0;$x<250;$x++){
?>
<SCRIPT LANGUAGE="JavaScript">
if(document.all){
document.all('divProgress').style.pixelWidth=document.all('divProgress').style.pixelWidth+1;
} else {
    var objLayer=document.layers['layProgress'];
    objLayer.resizeTo(<? echo $x; ?>, 15);
}
</SCRIPT>

<?
flush(); flush(); flush();
?>

<?
for($c=0;$c<2200;$c++){
echo "";
}
?>
<?
flush(); flush(); flush();
?>

daphreeek

that script looks lovely but does it actually pre-load anything? i cant see where it loads the page.

Matt

PyroX

You would strew it throughout your page wherever it loops or is slow:

<SCRIPT LANGUAGE="JavaScript">
if(document.all){
document.all('divProgress').style.pixelWidth=document.all('divProgress').style.pixelWidth+1;
} else {
var objLayer=document.layers['layProgress'];
objLayer.resizeTo(<? echo $x; ?>, 15);
}
</SCRIPT>

Each spot this is should be followed by:
flush();

Get it?

torsoboy

thanks PyroX, i'll give it a try on thursday.