How to show loading image(GIF) until Script function is Finished

I have a html button. Code is given bellow,

<div id="apDiv1">
    <input name="wpost" type="button" value="Publish" onClick="wall_publish()"/>
</div>

When a user click 'Publish' button it calls 'wall_publish()' script function which is in the same page.Code of the 'wall_publish()' function is given bellow,

<script> 
function wall_p开发者_如何学编程ublish(){
       //some codes...
    }
</script>

I need to display a loading gif image near my 'Publish' button until Script function is finished.

Can anyone please tell me how to do this?

you should show the picture do the job then remooove it again just that simple

function show pic();

function do job();

function remove pic();

If you have no idea about how to show a picture i think you should go check java-script doc's if you try to make the pic invisible i can suggest you use the jquery library and just addthe line

$('#img').hide(); to hide it and $('#img').show(); to show it ; this is not very specific but you sshould go throu that

i think you HTML code but not sure

<img src="the adress of the image" id="gif" />

The best way to show/remove any html is by making use of the display property.

1. Create a hidden image.

2. function wall_publish(){

   document.getElementById('loading').style.display='inline'; /* display it */
   
   // do what you need here
   
   document.getElementById('loading').style.display='hidden'; /* put it away again */
   

   }

There are, of course, a dozen way to do this. I picked the most straight-forward easy approach that I used to use when I first started to learn javascript.