Creating a "Now loading" screen for a game

[Nohana]

How can I create a "Now Loading..." screen, similar to those you see in flash/java games using JS? I'm designing a small modest game, and would like to have all images preloaded before the game begins. ^_~

[Synook]

Well, you could have two divisions, one to show while loading and the other to show after it has loaded.

<script type="text/javascript">window.onload = function() {document.getElementById('loading').style.display = "none";document.getElementById('content').style.display = "block";}</script><!-- ... ... --><div id="loading">Now Loading...</div><div id="content">All your content goes here</div>

[Nohana]

Thanks for your reply, but what I want to know is how to create the trigger for displaying both screens. =PHow can I tell the browser all images have finished loading so the 'content' <div> can become visible?Does the window.load part do this?

[Sniffy]

window.onLoad() is after the page is loaded.Make sure that all your content is not displayed (via the stylesheet or whatever method you choose)Make sure only the id "loading" is the only thing that is displayed (do this via stylesheet or....)Add the code that Synook gave you and you're done... I think.