Loading bar animation

[cantona]

Hi

Does anyone know how to create a "page loading" animation in PHP or/and JavaScript/AJAX?

The site I'm working on has quite a large database. When running SQL searches on it sometimes it takes 7 seconds to load the results.

It would be nice if - instead of viewing a whitescreen - the user saw some sort of animation or loading bar.

I've tried looking for some tuts, but so far been unsuccessful.

One I really like is on <snip> (search in a city, then re-sort the list - loading animation appears)

Any ideas?

[edited by: dreamcatcher at 3:02 pm (utc) on June 17, 2008]
[edit reason] No urls please! [/edit]

[Demaestro]

Hey cantona.

Typically this is done with a animated gif image.

What you do is, when the page starts loading you have the loading graphic in a div somewhere, I usually place it as a background image. Then you either use a timer and set it to the average load time or use some other method of telling when the data is loaded.

Once the data is loaded or your timer has run out you use Javascript to hide the div or if you used the background image method you can assign a different image or just remove the loading gif altogether.

There is some good info here of you want to check it out.

[webmasterworld.com...]

If you have more questions, just ask.

[cantona]

Hi Demaestro

Thanks for the quick reply!

Rather than meta refreshes and guessing how long page takes take to load on average, would a better way be to display the animated gif in a div and have css show/hide it. The results php file could set a session. Then if that session is displayed the css could hide the div.

Does that sound feasible?

I'd probably need some JavaScript to hook it all up together though and I'm not so good on that. Can you help?

[Demaestro]

Yes that is feasible but the ideal way to do this would be to load the data in with Ajax. That way you can tell when the data is loaded and show/hide the loading gif.

If javascript is a problem for you then this might be harder at first but when you get it all working you will understand it all a lot better.

The good news is that it is all pre-written you just have to migrate it with your site.

[developer.yahoo.com...]

This has everything you need. All the "hooks" are coded already and look like this.

var callback =
{
success: function(o) {/*success handler code*/},
failure: function(o) {/*failure handler code*/},
}

so you would code the success function to remove your loading gif... and so on.

Have a look and if you have questions, just ask.