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:


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

The CSS:

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

<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";
I know that this line has a problem, the code is not correct, yet do not know how to correct it.

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

<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>
or what about this?

<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">
your help greatly appreciated