How to show ajax loading gif animation while the page is loading?

There are many approaches to do this.A simple way to do:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

JS:

$(function() {    $(".changepass").click(function() {        $("#dvloader").show();        $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });        return false;    });});

Edited display:block to show() after suggestion from James Wiseman :)

To make it a little more robust, for example, you forget to add the

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

to the html, you can also do this in jQuery, something like:

var container = $.create('div', {'id':'dvloader'});var image = $.create('img', {'src':'loading.gif'});container.append($(image));$("body").append($(container));

Which will add the div automatically.

Just fire this on the onclick button event.

Makes it a little less open to errors.

Rather that setting the style

.css("display", "block");

Just use the .hide() and .show() methods.

These account for the brower default stylesheet definitions for HTMl elements. You may not want to display 'block' for the image. There can be loads of different possible display styles for an element:

http://www.w3schools.com/htmldom/prop_style_display.asp