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

Answer 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.