jQuery 窗口加载 2 秒后不显示网站

问题描述

我正在尝试在 index.html 出现在客户端之前加载页面

HTML 代码：

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

CSS Code：进行加载页面的设计

.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 代码：这里是加载和显示滚动的代码

/*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();
        });
    });
});

问题是加载页面出现，一切正常，但index.html在2ms后没有出现并显示网站

解决方法

编辑：$(window).load(function () { 使您的代码块“过早”执行（在页面加载/准备好之前） - 将其更改为 $(document).ready(function () { 以使其在文档/页面准备好后运行.

旧：

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

新：

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

更新：

正如 @charlietfl 所评论的，请使用以下更短的 $(document).ready() 形式：

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