showing an image until content is loaded

Question

i am doing a jquery back end search of data from a DB table..until i fetch the data from the table...how do i show am image like every where its shown like searching or something like tht

Answer 1

Have this image on your page initially...

<img id="loading" src="loading.gif" />

then with jQuery simply do this:

$(function(){
    $("#loading").hide();
});

of if it's an ajax call (which I think it is) do this:

$.ajax({
    url: 'ajax/test.html',
    success: function(data) {
        $("#loading").hide();
    }
});

Answer 2

One more way is to use $.ajaxSetup to make show image on all of your queries:

$.ajaxSetup({   

beforeSend: function (XMLHttpRequest) {
     $("#loading").show();
},

complete: function (XMLHttpRequest, textStatus) {
 $("#loading").hide();
}
});

Answer 3

I just use code like

$(function(){
$('#id').change(function()
{
$.post('url.php',{name:$("#name").val()},function(data)
{
$("#html").html(data);
});
});
});

so i need to use the imge.show()... juts before

$("#html").html(data); rite ?

Answer 4

I have a small doubt..My project has grown big. every where .change function is used. can i write a global code like when ever change function is called..show the image until the data is loaded???