Question

我正在创建一个网站，因为我不了解jQuery，所以请帮我创建这个网站。我要感谢那些在这个项目中帮助我的那些美丽聪明的人。现在出现这个问题，我想要一个有预加载器的网页出现在屏幕上，直到网页的所有内容都被加载。一旦内容加载，预加载器就会消失。我正在使用Brackets编辑器，它在我编写的jQuery代码中显示错误（小红叉），并且在加载内容后preloader也没有消失。我正在使用jQuery版本1.12.4。我提供所有已编写的代码。请帮我解决这个问题。

HTML：

<div class="preloader">
    <div class="status">
        <div class="status-mes"></div>
    </div>
</div>

CSS：

.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.status-mes {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 5px solid rgba(0, 0, 0, 0.08);
    border-right: 5px solid rgba(0, 0, 0, 0.08);
    border-bottom: 5px solid rgba(0, 0, 0, 0.08);
    border-left: 5px solid #ffb900;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

jQuery的：

(function($) {
    'use strict';

    jQuery(document).on('ready', function(){

        $(window).on('load', function() { 
            $('.status').fadeOut();
            $('.preloader').delay(350).fadeOut('slow'); 
        }); 

})(jQuery);

Answer 1

希望这会有所帮助......

$(window).load(function() {
    $('.status').fadeOut();
            $('.preloader').delay(350).fadeOut('slow');
});

.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.status-mes {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 5px solid rgba(0, 0, 0, 0.08);
    border-right: 5px solid rgba(0, 0, 0, 0.08);
    border-bottom: 5px solid rgba(0, 0, 0, 0.08);
    border-left: 5px solid #ffb900;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preloader">
    <div class="status">
        <div class="status-mes"></div>
    </div>
</div>
 <p> Welcome to my website!!! </p>

jQuery显示错误

1 个答案: