Question

I am not sure if this is an error or the way it should be…

I am using a AJAX Loader at the top of my page because the page has several large files and I want the user to know when the page finishes loading. I have tested this in the major browsers and only opera shows the loader at all. The rest it never shows yet I can tell the content is not finished loading. Why does this loader not show?

Code:

HTML (This is at the first item in the page)

<div id="loading">
    <h2 class="textcenter"><span style="font-family:'Comic Sans MS', cursive;">LOADING</span><img class="center" style="width:128px" src="/messages4u/2011/images/preloader.gif" width="128" height="128" alt="Pre-Loader Animation" /></h2>
  </div>

JS (This is the last element on the page)

<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>

Answer 1

Use the onload-event of the window(fires when all ressources have finished loading), otherwise the loader will be hidden as soon as the script is parsed.

<script type="text/javascript">
window.onload=function()
{
document.getElementById("loading").style.display = "none";
}
</script>