CODEWITHSUNDEEP
javascripthtmlcssloader
Lasagna Cat
Lasagna Cat

Reputation: 397

Trying to use loader animation to buy my webpage some time to load, but webpage still only loads after animation and in chunks

I am attempting to make a website that utilizes a loader animation in the beginning to buy the "bulk" of my website some time to load. I set the loader animation to 3 seconds and my <body> element to be displayed as hidden. However, when the 3-second loader animation is done, my website still loads in chunks.

The code listed below has the exact code I am using, however the <body> is reduced to one simple sentence for sake of this thread. I am actually using an html/css/js/bootstrap template with pictures, favicons and other things. It isn't that heavy of a site, but there is a good bulk of media on there.

Codepen link here

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .cssload-container *, .cssload-container *:before, .cssload-container *:after{
        box-sizing: border-box;
            -o-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
    }

    .cssload-container {
        margin: auto;
        width: 68px;
        height: 29px;
        position: fixed; /* or absolute */
        top: 50%;
        left: 50%;
    }
    .cssload-container > div {
        float: left;
        background: rgb(185,108,255);
        height: 100%;
        width: 5px;
        margin-right: 1px;
        display: inline-block;
    }

    .cssload-container .cssload-shaft1 {
        animation-delay: 0.06s;
            -o-animation-delay: 0.06s;
            -ms-animation-delay: 0.06s;
            -webkit-animation-delay: 0.06s;
            -moz-animation-delay: 0.06s;
    }
    .cssload-container .cssload-shaft2 {
        animation-delay: 0.12s;
            -o-animation-delay: 0.12s;
            -ms-animation-delay: 0.12s;
            -webkit-animation-delay: 0.12s;
            -moz-animation-delay: 0.12s;
    }
    .cssload-container .cssload-shaft3 {
        animation-delay: 0.17s;
            -o-animation-delay: 0.17s;
            -ms-animation-delay: 0.17s;
            -webkit-animation-delay: 0.17s;
            -moz-animation-delay: 0.17s;
    }
    .cssload-container .cssload-shaft4 {
        animation-delay: 0.23s;
            -o-animation-delay: 0.23s;
            -ms-animation-delay: 0.23s;
            -webkit-animation-delay: 0.23s;
            -moz-animation-delay: 0.23s;
    }
    .cssload-container .cssload-shaft5 {
        animation-delay: 0.29s;
            -o-animation-delay: 0.29s;
            -ms-animation-delay: 0.29s;
            -webkit-animation-delay: 0.29s;
            -moz-animation-delay: 0.29s;
    }
    .cssload-container .cssload-shaft6 {
        animation-delay: 0.35s;
            -o-animation-delay: 0.35s;
            -ms-animation-delay: 0.35s;
            -webkit-animation-delay: 0.35s;
            -moz-animation-delay: 0.35s;
    }
    .cssload-container .cssload-shaft7 {
        animation-delay: 0.4s;
            -o-animation-delay: 0.4s;
            -ms-animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
    }
    .cssload-container .cssload-shaft8 {
        animation-delay: 0.46s;
            -o-animation-delay: 0.46s;
            -ms-animation-delay: 0.46s;
            -webkit-animation-delay: 0.46s;
            -moz-animation-delay: 0.46s;
    }
    .cssload-container .cssload-shaft9 {
        animation-delay: 0.52s;
            -o-animation-delay: 0.52s;
            -ms-animation-delay: 0.52s;
            -webkit-animation-delay: 0.52s;
            -moz-animation-delay: 0.52s;
    }
    .cssload-container .cssload-shaft10 {
        animation-delay: 0.58s;
            -o-animation-delay: 0.58s;
            -ms-animation-delay: 0.58s;
            -webkit-animation-delay: 0.58s;
            -moz-animation-delay: 0.58s;
    }

    .cssload-container {
        height: 39px;
    }
    .cssload-container > div {
        position: relative;
        bottom: 0;
        margin-top: 34px;
        height: 5px;
        animation: cssload-wave 1.73s infinite ease-in-out;
            -o-animation: cssload-wave 1.73s infinite ease-in-out;
            -ms-animation: cssload-wave 1.73s infinite ease-in-out;
            -webkit-animation: cssload-wave 1.73s infinite ease-in-out;
            -moz-animation: cssload-wave 1.73s infinite ease-in-out;
    }
    .cssload-container .shaft1 {
        animation-delay: -1.73s;
            -o-animation-delay: -1.73s;
            -ms-animation-delay: -1.73s;
            -webkit-animation-delay: -1.73s;
            -moz-animation-delay: -1.73s;
    }
    .cssload-container .shaft2 {
        animation-delay: -1.61s;
            -o-animation-delay: -1.61s;
            -ms-animation-delay: -1.61s;
            -webkit-animation-delay: -1.61s;
            -moz-animation-delay: -1.61s;
    }
    .cssload-container .shaft3 {
        animation-delay: -1.5s;
            -o-animation-delay: -1.5s;
            -ms-animation-delay: -1.5s;
            -webkit-animation-delay: -1.5s;
            -moz-animation-delay: -1.5s;
    }
    .cssload-container .shaft4 {
        animation-delay: -1.38s;
            -o-animation-delay: -1.38s;
            -ms-animation-delay: -1.38s;
            -webkit-animation-delay: -1.38s;
            -moz-animation-delay: -1.38s;
    }
    .cssload-container .shaft5 {
        animation-delay: -1.27s;
            -o-animation-delay: -1.27s;
            -ms-animation-delay: -1.27s;
            -webkit-animation-delay: -1.27s;
            -moz-animation-delay: -1.27s;
    }
    .cssload-container .shaft6 {
        animation-delay: -1.15s;
            -o-animation-delay: -1.15s;
            -ms-animation-delay: -1.15s;
            -webkit-animation-delay: -1.15s;
            -moz-animation-delay: -1.15s;
    }
    .cssload-container .shaft7 {
        animation-delay: -1.04s;
            -o-animation-delay: -1.04s;
            -ms-animation-delay: -1.04s;
            -webkit-animation-delay: -1.04s;
            -moz-animation-delay: -1.04s;
    }
    .cssload-container .shaft8 {
        animation-delay: -0.92s;
            -o-animation-delay: -0.92s;
            -ms-animation-delay: -0.92s;
            -webkit-animation-delay: -0.92s;
            -moz-animation-delay: -0.92s;
    }
    .cssload-container .shaft9 {
        animation-delay: -0.81s;
            -o-animation-delay: -0.81s;
            -ms-animation-delay: -0.81s;
            -webkit-animation-delay: -0.81s;
            -moz-animation-delay: -0.81s;
    }
    .cssload-container .shaft10 {
        animation-delay: -0.69s;
            -o-animation-delay: -0.69s;
            -ms-animation-delay: -0.69s;
            -webkit-animation-delay: -0.69s;
            -moz-animation-delay: -0.69s;
    }
    .cssload-container .shaft11 {
        animation-delay: -0.58s;
            -o-animation-delay: -0.58s;
            -ms-animation-delay: -0.58s;
            -webkit-animation-delay: -0.58s;
            -moz-animation-delay: -0.58s;
    }



    @keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-o-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-ms-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-webkit-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

    @-moz-keyframes cssload-wave {
        50% {
            height: 100%;
            margin-top: 0;
            background: rgb(86,215,198);
        }
    }

h2 {
  position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
}
    </style>
    </head>
    <body onload="myFunction()" style="margin:0;">

    <div id="loader">
        <div class="cssload-container">
        <div class="cssload-shaft1"></div>
        <div class="cssload-shaft2"></div>
        <div class="cssload-shaft3"></div>
        <div class="cssload-shaft4"></div>
        <div class="cssload-shaft5"></div>
        <div class="cssload-shaft6"></div>
        <div class="cssload-shaft7"></div>
        <div class="cssload-shaft8"></div>
        <div class="cssload-shaft9"></div>
        <div class="cssload-shaft10"></div>
        </div>
    </div>
    </div>

    <div style="display:none;" id="myDiv" class="animate-bottom">
      <h2>Zing! If you're seeing this after the loader animation, it works!</h2>
    </div>

    <script>
    var myVar;

    function myFunction() {
        myVar = setTimeout(showPage, 3000);
    }

    function showPage() {
      document.getElementById("loader").style.display = "none";
      document.getElementById("myDiv").style.display = "inline";
    }
    </script>

    </body>
    </html>

Upvotes: 0

Views: 68

Answers (1)

Pat
Pat

Reputation: 2750

Instead of guessing when your content is ready to be viewed you can attach an event handler to the document to listen for DOMContentLoaded then call your showPage() function within that. Like this:

document.addEventListener("DOMContentLoaded", function(event) { 
  showPage();
});

Upvotes: 1

Related Questions