How to show a loading gif mean while a submit form is being executed JQuery

Using the jQuery submit function, you can specify a loading image like this:

$('#form').submit(function() {    $('#wait').show();    $.post('/somepage.htm', function() {        $('#wait').hide();    });    return false;});

Have you tried loading the image on document ready, only having it hidden. Then display it in your function? This way, the image is already loaded and spinning.

$(document).ready(function() {    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");});$('#gds_form').submit(function() {    var pass = true;    //some validations    if(pass == false){        return false;    }    $("#overlay, #PleaseWait").show();    return true;});

The real issue with your implementation is how does the client side know when your request has completed. One of the reasons why Ajax is helpful is because we have a notion of states and therefore we can display a loader while the client is waiting for a response and remove the loader when the client receives a response.

How are you going to determine when the communication with the web service is completed? You say that you don't want to use Ajax, but if you are going to want to query a service to determine whether your communication completed, you are probably seeing something that will require Ajax.