Show splash screen when page loads, but at least for x seconds

I have a div with a splashscreen element. This element will be hidden on page load. However, I also want to make sure the splash screen is shown for at least x seconds.

I know this is not all supposed to be formatted as code but the auto formatter made me do it.

To use logic: Show splash screen for at least x seconds. If the page is loaded by that time hide this div.

This code is the part where it hides the div as soon as the page is loaded.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
            $(document).on("pageload",function(){
                $('#splashscreen').hide();
            });
        </script>
        <title>Thomas Shera</title>
    </head>
    <body>
        <div id="splashscreen">
        </div>
    </body>
</html>

This is the part where I show the splash screen for x seconds.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
            $(function() {
                $("#div2").show().delay(x).hide();
            });
        </script>
        <title>Thomas Shera</title>
    </head>
    <body>
        <div id="splashscreen">
        </div>
    </body>
</html>

So basically I am asking, how can I combine these two jquery codes?

EDIT: I am now trying this code but something still doesn't work.

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">

    $(document).on("pageload",function(){
               $('#splashscreen').hide();
});

$(function() {
     $("splashscreen").show().delay(1000).hide();
 });

</script>

<style type="text/css">
  @import url(https://fonts.googleapis.com/css?family=Cutive+Mono);

  .skills
  {
    font-family: 'Cultive Mono', monospace;
    font-size: 400pt;
  }

</style>

<title>Thomas Shera</title>

</head>
<body>
  <div id="splashscreen">
    <p i="skills">
      Javascript  Technical writing   VBA scripting with Microsoft Office   Excel
      Entrepreneur
    </p>
  </div>
</body>
</html>
jquery html
kishan patel

Answers 1

Submit Answer
  • sahil Kothiya

    Hope this helps.

    HTML

    <body onload="splash(3000)">

    Javascript

    function splash(param) {
 var time = param;
 setTimeout(function () {
   $('#splashscreen').hide();
 }, time);
}

    From CSS display the #splashscreen element block and when the page loads it'll hide from javascript.

    If you want to test this out, load a high resolution image from Google. Your splash will be visible either the website content loads or at least x number of seconds if the website content loaded from the browser cache.

Related Articles