Progress Indicator

[Anon]

Hi anyone!

Is there any way I can feature a load progress indicator (for example when I have a large site tha takes some time to load or a single large picture) on my site with the help of php?

I have thought about it a lot and I even think I saw something like this before but cannot remember where...

Any ideas would be apprechiated!

[[deleted]]

What you saw was probably a flash animation, because flash knows how much it should download. A web page does not.

But, shouldn't you be spending your time optimizing the site rather than making the user wait for the download of an indicator that tells them they have to wait even longer? :-)

[ame12]

One way to do this is to use a metatag refresh (e.g., every 2 seconds) to repaint a progress indicator until it is complete.

So you could output a bar or text indicator ("20% complete") along with the meta-tag... 2 seconds later, re-evaluate and repaint.

Dave

===========================================
http://badblue.com
Small footprint P2P web server for Windows,

File-sharing, PHP, wireless apps & more

[Anon]

But how would you know how much of the item had loaded?

[Anon]

Forget serverside tools for this application theres just no point. Clientside is what you should be looking for eg Flash, Javascript etc. Because the client is inherently familiar with is properties (eg modem speed) while the server isnt!

Regards

Sacevoy

[[deleted]]

Indeed.
So you'd need a tool that can figure out how fast the network connection is and how large the page that is going to be loaded will be.
It would have to be a java applet because it must run on windows and unix and mac and it would have to peek into the OS to see what kind of network connection there is, and how fast the connection to the server really is.
And it has to be aware of browser caching.
And it has to be small enough not to cause a delay when loading the page.
And you need a backup in case java is disabled.
And it has to be so subtle that users will like it...

Nah, it's much easier to just make your site faster. :-)

[brandonschnell]

vincent is right.

the only cheap workaround i can think of would be to use javascript. create a couple of small images that roughly tell the user how much has been downloaded then use javascript to update the image. for example if you think the banner is 10% of the loading time then right before the banner loads have javascript load an image that shows 0% completed and right after the banner loads use javascript to flip to an image that shows 10% completed. some problems with this approach is that this is more stuff the user has to download, it doesn't have any accuracy (can't tell the progess of individual items), and the user might not have javascript.

[jc94062]

then you've got more images of course.

Try just getting a good editor like Paint Shop Pro which is great at compressing picutures without hardly any resolution change (my front page - graphics heavy - went from 105kb to 30kb load if about 2 hours work)

As for PHP type code, as Vincent said, just go through and get it as compact as possible (don't forget the comments are 'ignored' on loading, so you don't have to avoid them, they won't slow you down)

Also, if your connecting to a db, are you using mysql_connect, or mysql_pconnect, or the equivalent in whatever db you are using?

[[deleted]]

If you have the cash, Photoshop also has a very nice optimizing feature that will automatically work out which format and which color palette will give the smallest image. You can preview the original next to the 'optimized' copy in realtime while you change the parameters. Works wonders.

Also on some browsers using large or nested tables can really slow things down.
Not the loading of the page, but the rendering once it is loaded.

I'd recommend using the microtime() function to measure how long the various sections of your page take to create through php, to see where the bottleneck is.
Ofcourse, if you are sending a large image simply because you want to send a large image, there's nothing you can do about that.

[Anon]

I think it's better to use transparent gifs as much as possible to format your page over tables, as tables only display once all content is loaded, whereas normally the page is displayed as it loads.

Streching images works too. At mybest50, currently the top and bottom of the table are big images (about 600pixels wide), but I could just shrink them to one pixel wide, and have the browser strech them to 600 pixels, as they're just the same all the way horizontally.

[[deleted]]

HMm... yes and no.

Images can have set dimentions, and tables are always off by the most annoyingly small numbers.
(everyone who has ever designed a table knows what I am talking about)
With images you can very accurately define the size.
But, images consist of hunderds if not thousands of bytes, where a table is a handfull of bytes, and a table does not force a new request to the webserver, images do.

So from a speed point of view, images are slower in downloading.
Tables are slower once the page has been loaded.
Usually there's a noce comprimise between the two, like using images to force table dimentions.

Very good point about stretching images.
If you have a table cell that refuses to be X pixels high or wide, just create a single-pixel image, stick it in the cell, and use HTML to strech it up to the dimentions you need, et presto, the table is forced to take the same dimentions.
Wonderfull stuff.

[kparker]

One way to do this is to use a metatag refresh (e.g., every 2 seconds)

But wouldn't that mean you'd have to use .... omigosh, I almost said the
F-word again!

Besides, hows the meta-refreshed thingie going to know either of (1) how big the entire "page" (base html plus all IMG's) is, and (b) how far along any of this is?