jQuery window load not showing the website after 2 second

user_3018000 0
Viewed 62

I'm trying to make a page load before the index.html appear to the client

HTML Code:

<section class="loading text-center">
                <div class="spinner">
                    <img class="img" src="img/logo.png" width="160" height="211" />
                </div>
    </section>

CSS Code: to make the design of the loading page

.loading {
    background-color: #fcfdff;
    color: #000;
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.spinner {
    position: fixed;
    top: 30%;
    left: 45%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

.img {
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(0px)
    }

    50% {
        -webkit-transform: perspective(0px) rotateY(180deg)
    }

    100% {
        -webkit-transform: perspective(0px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(0px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(0px) rotateX(0deg) rotateY(0deg)
    }

    50% {
        transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(0px) rotateX(-180.1deg) rotateY(0deg)
    }

    100% {
        transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(0px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

jQuery Code: Here the code to load and show the scroll

/*global $, window, document, jQuery */
// Loading Screen
$(window).load(function () {
    "use strict";
    $(".loading .spinner").fadeOut(2000, function () {
        $(this).parent().fadeOut(2000, function () {
            //Show The Scroll
            $("body").css("overflow", "auto");
            $(this).remove();
        });
    });
});

The problem is that the load page appear and every thing is good but the index.html no appearing after 2ms and show the website

css html jquery javascript
1 Answers

EDIT: the $(window).load(function () { is making your code block execute 'too early' (before the page is loaded/ready) - change it to $(document).ready(function () { to make it run after the document/page is ready.

Old:

// Loading Screen
$(window).load(function () {
    ...
}

New:

// Loading Screen
$(document).ready(function () {
    ...
}

UPDATE:

As commented by @charlietfl, use the below shorter form of $(document).ready():

// Loading Screen
$(function () {
    ...
})
user_24206630
Related