Блог

Главная - Вопросы по программированию - Некоторая проблема с предварительным загрузчиком на веб-странице с JS

Некоторая проблема с предварительным загрузчиком на веб-странице с JS

#javascript #jquery #animation #preload

#javascript #jquery #Анимация #предварительная загрузка

Вопрос:

Я пытаюсь создать простой предварительный загрузчик на веб-странице, но у меня есть несколько ошибок. Код 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>

Ответ №1:

Вы включили jQuery? Сделайте это, затем что-то вроде этого:

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