I want to create a splash page for the app I'm creating using HTML5.
The splash page should be displayed while the main page is being loaded (but the display should be at least 2 seconds even if the main page was already loaded). Say my main page is called main.html and the splash page is called index.html
I'm new to JavaScript, so I would really appreciate code example in addition to any explanations.
Thank you!
I want to create a splash page for the app I'm creating using HTML5.
The splash page should be displayed while the main page is being loaded (but the display should be at least 2 seconds even if the main page was already loaded). Say my main page is called main.html and the splash page is called index.html
I'm new to JavaScript, so I would really appreciate code example in addition to any explanations.
Thank you!
Share Improve this question edited Jan 3, 2014 at 10:38 DMEM asked Dec 29, 2013 at 18:49 DMEMDMEM 1,6138 gold badges27 silver badges45 bronze badges 1- Load the splash popup, and after two seconds start checking if the main page is loaded. As soon it is, close the splash. – Shomz Commented Dec 29, 2013 at 18:53
1 Answer
Reset to default 2You could do something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript">
$('#splash').ready()
{
$('#main').load('file.html');
setTimeout(function() {
$('#main').ready(function() {
$('#splash').remove();
window.location.href = "file.html";
});
}, 2000);
}
</script>
</head>
<body>
<div id="splash" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 10;">
<!--Put splash here-->
</div>
<div id="main">
<!-- keep empty -->
</div>
</body>
</html>
Not really tested, might contain bugs... Uses jQuery