Javascript - How to do a splashscreen?

Question

I am looking for a javascript function that will delay by webpage body to load, i want it to display my html background for 1 or 2 second and then display body content. need help. Thanks

Put the content inside a huge div. Make it hidden by default. Show it 2 seconds after the page load. — , May 08 '12 at 05:54
I assume the code @pst was talking about is something like this: `onload=setTimeout(function(){document.getElementById("bigDiv").display = "block";}, 2000);"` — JNF, May 08 '12 at 05:58
You mean: `document.getElementById("bigDiv").style.display = ''` but probably better to use `style.visibility`. Regardless, they'll both be annoying. — RobG, May 08 '12 at 06:28

score 3 · Answer 1 · answered May 08 '12 at 07:50

3

You can use the .delay() function in jquery (I'm using Jquery 1.7.1 version) like the below example:

 $(selector).delay(2000).fadeIn("slow");

answered May 08 '12 at 07:50

HGK

386
1
4
13

score 1 · Answer 2 · answered May 08 '12 at 05:57

you can't stop page load. but you can force a splash screen by hiding the main container of your content until a specified time..

<div id="bg">
  <div id="container" style="display:none">
  -- your content goes here -- 
  </div>
</div>
<script type="text/javascript">
// use setTimeout to show #container
</script>

jfriend00 · Answer 3 · 2012-05-08T06:20:37.253

You can't delay the loading of your body content, but you can put a div on top of your content (using absolute positioning and z-index) that displays over the top of it and hides your content until your two seconds have run and then you can hide the overlay div.

Here's a working example: http://jsfiddle.net/jfriend00/Ru6tk/ where you can see the HTML, the CSS and the javascript.

Or, you could put your main body content inside it's own div and set that div out as display: none via initial CSS and then whatever other content there is will show first and then after two seconds, you can show your main div and hide the other div thus hiding the background and showing your main content.

score 1 · Answer 4 · edited Mar 13 '13 at 09:01

follow these steps

1) put a div on top of your content and set it css property display:none like

&lt;body&gt;
&lt;div id="wrapperdiv" style="display:none;"&gt;
......<br/>
&lt;/div&gt;
&lt;/body&gt;
<br/>

2) now on body tag of your page add a onload function like

 <body onload="displaypage()">;

3) Now add script under body tag like

<script type="text/javascript">;
function displaypage()
{<br/>
var t=setTimeout("displaydiv()",3000);//Number of seconds *1000, Currently its **3** seconds 
}
function displaydiv()
{
document.getElementById("wrapperdiv").style.display='block';
}    
</script>;

Live Example

<html>
<head>
<title>Test Delay Display Page By IuR</title>
</head>
<body onload="displaypage()">
<script type="text/javascript">
function displaypage()<br/>
{
var t=setTimeout("displaydiv()",3000);// it will Delay for 3 seconds
}

function displaydiv()
{
document.getElementById("wrapperdiv").style.display='block';
}

</script>
<div id="wrapperdiv" style="display:none;height:500px;width:300px;background-color:red;">
</div>

</body>
</html>

Ken H · Answer 5 · 2019-12-21T01:10:36.047

This was posted as a temporary alert elsewhere, but I use it as a splash screen too. The style settings make it center on page, and center the text inside.

function alertTimeout(mymsg,mymsecs)
{
 var myelement = document.createElement("div");
myelement.setAttribute("style","background-color: grey;color:black; width: 450px;height: 200px;position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold;display: flex; align-items: center; justify-content: center; text-align: center;");
 myelement.innerHTML = mymsg;
 setTimeout(function(){
  myelement.parentNode.removeChild(myelement);
 },mymsecs);
 document.body.appendChild(myelement);
}

To call:

alertTimeout("Splash 1.0<br>This is a splash<br>Thank you for watching",5000)

Javascript - How to do a splashscreen?

5 Answers5