I have been trying to display the Loader.gif image when the form is submitted, it works fine with FF browser but doesnt work with IE, I tried with settimeout() function of javascript which helped to resolve the problem for IE but then it was not working with FF
So someone could pls provide me a detail working example for both FF and IE??
If you are uploading an image, you could just have the loader.gif hidden using CSS (display: none;) and then in the forms onSubmit event put something like document.getElementById("loaderImageID").style.display = "block"; (or instead of block, whatever display type you need) which would show the image after the user has clicked the submit/upload/whatever button, and when the page refreshes the image would be gone.
(Unless I have misunderstood what you are trying to do, i do not see the need for setTimeout())
EDIT: Ok this is the updated copy of the code (which should work exactly as you need now)
<html>
<head>
<script type="text/javascript">
function uploading()
{
//Show the placeholder div
document.getElementById("loader").style.display = "block";
//Create a new image element with the loader.gif as the source
var loader = document.createElement("img")
loader.setAttribute("src","loader.gif");
//Add the loader image to the loader div
document.getElementById("loader").appendChild(loader);
}
</script>
</head>
<body>
<!-- Placeholder for the loader (style it as you wish)-->
<div style="display: none; height: 50px; width: 50px;" id="loader"></div>
<a href="javascript: uploading();">Test</a>
<form onSubmit="uploading();">
<input type="submit" onClick="uploading();"/>
</form>
</body>
</html>
I have used a loader from the site that you linked to and faced the same problem to start with. The problem is caused by the element being invisible when it was added to the DOM. Afterwards when you show the element IE does not start the animation. (source)
Can you give us some more information as to the functionality of this page?