PreLoad Index.HTML from another Page - Javascript

Question

Firstly, I've searched around and found some things close to what I was looking for but nothing that helped me get to a solution. I have a professional landing page that uses a lot of high res images and stuff so I want to preload it before the users see it so it comes in smoothly. I'm using the below Javascript (I found) to load it in. But I don't think the current Javascript is actually preloading Index.HTML before displaying it. The below javascript is loaded from Preloader.html which I'll display that code below too.

preload.js

(function() {

    var preload = document.getElementById("preload");
    var loading = 0;
    var id = setInterval(frame, 64); 


    function frame() {
        if(loading == 100) {
            clearInterval(id);

            window.open("index.html", "_self");
            return false;

        } else {
            loading = loading + 1;
            if (loading == 90) {
                preload.style.animation = "fadeout 1s ease";

            }
        }
    }


})();

Preloader.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>

        <div class="preload" id="preload">
            <div class="logo">

            </div>
            <div class="loader-frame">
            <div class="loader1" id="loader1"></div>
            <div class="loader2" id="loader2"></div>
            </div>

        </div>

        <script type="text/javascript" src="js/preload.js"></script>

    </body>
</html>

I'm pretty sure it's because I'm a complete noob to javascipt and it's only doing window.open and no actual tracking of the index.html page being preloaded. But I couldn't find anything online to confirm this. I believe all my preload.js is doing right now is just on a delay timer using the else statement then it opens index.html without it actually being preloaded.

Thanks for your time, Cheers!

Answer 1

What is going on here is that you're "loading" the page when the counter reaches 100%, and then you're asking the browser to load the page. Indeed no preloading is being done because all that needs to be loaded is the page itself. To sum it up.

The loader page "loads" itself
The loader page displays some animation
When the counter reaches 100, the code asks the browser to navigate to another page
Browser opens page and starts loading the real content

You need to keep all this code together in your page, there is no correct way of knowing the PERCENTAGE of loading from your website, but you can know WHEN it has loaded by using this function:

<script>
  window.onload = function() {
    alert('page finished loading all images, css and js!');
    hideOverlay();
  };
</script>

Use this function to hide your overlayElement like so:

function hideOverlay() {
  document.querySelector('#preload').style.display = 'none';
}

PreLoad Index.HTML from another Page - Javascript

Question

1 answers

solution1
0 ACCPTED 2017-02-09 17:55:20

PreLoad Index.HTML from another Page - Javascript

Question

1 answers

solution1 0 ACCPTED 2017-02-09 17:55:20

solution1
0 ACCPTED 2017-02-09 17:55:20