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

I try to implement AJAX in my website. When the content of the div changepass is clicked then it should load changepass.template.php. Here is the code im using for that.

 $(function() {
   $(".changepass").click(function() {
    $(".block1").load("views/changepass.template.php");
    return false;
 });

My question is how to show GIF Animation (loading.gif) while the page changepass.template.php is fully loaded. Give me some code tips Please.

Solution 1:

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 :)

Solution 2:

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.

Solution 3:

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