How do I build a page preloader for a php page?

views:

172

answers:

+1 Q:

How do I build a page preloader for a php page?

Hi guys, I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.

Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.

How do I implement this - my site is built using php and tonnes of javascript.

+2 A:

I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.

Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)

EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.

MartyIX 2010-07-25 11:51:22

+3 A:

Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.

Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.

ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.

ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.

James 2010-07-25 11:53:55

There's something i never would have thought of - laws regarding accessing a site by disabled users.

fortheworld 2010-07-25 12:08:30

ansaurus

tags:

views:

answers:

How do I build a page preloader for a php page?

related questions