Do you have any Ajax loading image ideas for use with jQuery?

Question

I have a page being loaded with jQuery. The initial load includes 100 records with 6 icons per record. Needless to say, it takes a few seconds to load and I want to give the user a "loading" prompt/animation.

Any ideas?

Answer 1

You could display a div with an animated GIF image as a loading prompt. That's the way I've done it in the past.

Answer 2

Any time I've needed something like this I replace the element that will be loaded with a simple, centered, animated gif of some sort that says "Loading, please wait" or a similar message. If it's only going to be a few seconds a progress indicator is probably overkill, but a simple animation gives most people the assurance that, yes, your site is still working.

Answer 3

http://www.ajaxload.info/ is a great resource for generating animated GIFs for this sort of thing.

Once you've got your animation, render it as part of the page; fire the jQuery load mechanism on the animation's onload() event (so you're certain the animation has loaded first), and use a callback at the end of your loading sequence to disable/hide the animated GIF.

Answer 4

Matt Berseth has a nice jQuery-based way of doing this.

Answer 5

You may want to set up a global ajax event to show/hide the loading icon. Have a look at: http://docs.jquery.com/Ajax_Events

Answer 6

Another ressource for loading images : http://www.loadinfo.net/