How to display an animation during page loading

Old web site requires sometimes to show a big "Loading..." gif in the front of the page. It is not trivial to do it, especially if you have already plenty of jQuery forms developed, with complex form submission, and half the site in an ajax form.

A small solution of this problem is to use the jQuery delegate function...and a lot of debugging.

Try out this code: [javascript]function showLoadGif() { $("#downloading").show(); }; $(document).ready(function(){ $("body").delegate("form:not([target=_blank])", "submit", showLoadGif); $("a[target!=_blank][href]:not([href*=javascript:alert])").parent() .delegate("","click",showLoadGif); $("a[target!=_blank] > img[src=yourResetButtonImage]").parent() .delegate("*","click",showLoadGif);

});[/javascript] The first delegate apply to the standard form submission, and works well on plain vanilla html pages.

This code avoids to fire up when you are opening pop ups via form, hrefs or JavaScript alert.

When the new page is loaded, the gif will disappear with the entire old body.

The last line ensures also images contained in link will be properly managed: for instance menu images , outside forms.

Comment by Lorenzo on 2011-01-14 14:36:50

You can try this plugin: http://jquery.malsup.com/block/

Bye!