I am wanting to add a page loading Gif to my signup pages so peopel can see something is happening.

I found this post here:

http://www.sitepoint.com/forums/show...ing-javascript

I would like the Gif to show onclick, and finish once the page has loaded.

The CSS:

Code:
#loading-image {
	width: 100px;
	height: 100px;
	position: fixed;
	top: 140px;
	right: 80px;
	z-index: 1;	
}
The script from the SitePoint page:

Code:
<script language='javascript' type='text/javascript'>
//Before starting ajax request display the div (paste it in  the beginning of your ajax request function
var loadingdiv = document.getElementById('loading-image');
loadingdiv.style.display = "block";

//execute the code below after the ajax request is complete
var loadingdiv = document.getElementById('loading-image');
loadingdiv.style.display = "none";
</script>
I know that this line has a problem, the code is not correct, yet do not know how to correct it.

Code:
<!-- Start of PAGE LOADER -->		
	<div id="loading-image">
      <img src="images/ajax-loader.gif" onlick="showloading-image()" alt="pageloadergif" width = "100" height = "100" />
      </div>	
<!-- End of PAGE LOADER -->
here is the code for the Button

Code:
<div class="input_row" align="right" style="width:500px; padding-top:20px;">
<input class="cupid-green" type="submit" style="border:none" name="next" value="Next �"></input>
</div>
or what about this?

Code:
<div id="loading-image">
    <input class="input_row" name="next" type="submit" onclick="$(this).showloading-image('<img src=images/ajax-loader.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">
    </div>
your help greatly appreciated