使用JS在网页上预加载器的一些问题

Question

我想在网页上创建一个简单的预加载器但我没有错。 JS代码不起作用。此代码应该在网页完全加载之前工作，然后完全消失有人知道如何解决此问题或其他方式或其他方式吗？我会很感激任何建议和任何帮助。

function preloader() {
    $(() =>{
        setInterval(() => {
            const p = ('.preloader');
            p.css('opacity', '0');
        }, 3000);
        setInterval(
            () => p.remove(),
            parseInt(p.css('--duration')) * 1000
        );
    });
}

preloader();

body{
    height: 100%;
    width: 100%;
    font-family: Verdana, sans-serif;
}
#loader-container{
    min-height: 1080px;
    min-width: 1920px;
    z-index: 999999;
    background-color: #000000;
    opacity: 1;
    transition: opacity .35s;
    -webkit-transition: opacity .35s;
    -moz-transition: opacity .35s;
    -o-transition: opacity .35s;
}

#load {
    position:absolute;
    width:1200px;
    height:36px;
    left:40%;
    top:40%;
    margin-left:-300px;
    overflow:visible;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
}

#load div {
    font-size: 90px;
    position:absolute;
    width:20px;
    height:36px;
    opacity:0;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 2s linear infinite;
    -o-animation:move 2s linear infinite;
    -moz-animation:move 2s linear infinite;
    -webkit-animation:move 2s linear infinite;
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    color:#35C4F0;
}

#load div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -moz-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
}

@keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left: 41%;
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -moz-transform:rotate(-180deg);
        -webkit-transform:rotate(-180deg);
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-moz-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -moz-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -moz-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -moz-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -webkit-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-o-keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left:41%;
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%;
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%;
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        opacity:0;
    }
}

<div class="container preloader" id="loader-container">
    <div id="load">
        <div>G</div>
        <div>N</div>
        <div>I</div>
        <div>D</div>
        <div>A</div>
        <div>O</div>
        <div>L</div>
    </div>
</div>

Answer 1

你有jQuery吗？这样做，然后是这样的：

    $(() => {
        const p = $('.preloader');
        setInterval(() => {
            p.css('opacity', '0');
            setInterval(() => {
                p.remove();
            }, 350)
        }, 3000);        
    });