Posts Tagged ‘Ajax loading’

December 11th, 2009

jQuery Ajax loading image

Well I noticed lack of instruction on using a loading image when you load something via Ajax.
So I am going to show you how, using jQuery.
First thing is you will need a loading image similar to this

If you do not have one there is an excellent site to generate all popular Ajax loading animate gifs in any color HERE.
The way it is loaded is like this,

Select All
1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function(){
    //Click function for the item you are loading
    $("#id_to_click").click(function(){
         //Stuff to do when clicked
         //Add your animated loading image before you load the content
         $("#content_id_to_load").empty().html('<img src="image_path/loading.gif" alt="" />');
 
         $("#content_id_to_load").load("new_page.html", function () {
		//Some more stuff to happen here when your Ajax item is loaded
 
         });
    });
});

I’m sure there are 101 ways to do this, so here is 102 :) .

Tags:


Posted in:

jQuery

Comments:

No Comments »