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

Question

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.

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