[solved] JavaScript splash screen

GemDev posted this at 10:23 — 5th February 2009.

They have: 3 posts

Joined: Feb 2009

Hello. I'm kinda new to JavaScript. My question is:

Say I have huge loads of data in one single page with lots of pictures, texts and maybe videos. It would take some time to load this into browser. What I want to ask is if it is possible to make something like a "Loading.." splash screen on top of everything with some delay (pre-defined or maybe even if possible for time it takes to load everything) and when all data is loaded, splash screen disappears and nice, clean and fully loaded page appears straight away. If you know what i mean.

Thanks in advance,
Arturas Bajoriunas.

kazimmerman posted this at 11:28 — 5th February 2009.

He has: 698 posts

Joined: Jul 2005

If you search Google, what appears to be the best solution is to create two DIVs, one with the "Loading..." message and the other containing all of the content you wish to hide. Give both a unique ID so you can reference them with JavaScript, and then do something like this:

<html>
  <head>
    <title>Your Web site</title>
    <script type="text/javascript">
      function showPage() {
        document.getElementById("loading_message").style.display = "none";
        document.getElementById("real_content").style.display = "block";
      }
    </script>
  </head>
  <body onload="showPage();">
    <div id="loading_message">
      <p>Loading...</p>
    </div>
    <div id="real_content">
      <!--Everything else can go here-->
    </div>
  </body>
</html>

This should work, because if I'm not mistaken, the onload event once the page is fully loaded. If you want some solutions for fading the message out and adding other effects, check out some of those Google results I gave you.

Kurtis

decibel.places posted this at 15:20 — 5th February 2009.

He has: 1,494 posts

Joined: Jun 2008

Hi Kurtis,

I generally trim my Google urls to prevent false data collection

instead of

http://www.google.com/search?q=javascript+splash+screen&ie=utf-8&oe=utf-...

I would make it

http://www.google.com/search?q=javascript+splash+screen

which still works and looks neater too!

There is also a service called "let me Google that for you" which generates an animated Google search for snotty replies to people who should know how to Google stuff - and it annoys the heck out of some members here!

http://letmegooglethatforyou.com/

it would produce a url like http://letmegooglethatforyou.com/?q=javascript+splash+screen (notice that you could construct the URL manually without going to the website)

...and if you want to conceal the service, also creates a tinyurl like http://tinyurl.com/aast6y which really annoys some members here

pr0gr4mm3r posted this at 15:45 — 5th February 2009.