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