时间戳

首页 > 解决方案 > 2 秒后 jQuery 窗口加载不显示网站

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

问题描述

我正在尝试在 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 后没有出现并显示网站

标签： javascripthtmljquerycss

解决方案

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

老的：

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

新的：

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

更新：

正如@charlietfl评论的那样，使用以下较短的形式$(document).ready()：

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

推荐阅读