Блог

Я пытаюсь добавить задержку в свой предварительный загрузчик, чтобы придать странице классный эффект. Я бы хотел, чтобы предварительный загрузчик отображался в течение пары секунд даже после загрузки страницы. У меня есть предварительный загрузчик, и он работает нормально, мне просто нужна помощь, чтобы добавить к нему задержку.

вот мой текущий код.

JS

 window.addEventListener('load', () => {
        const preload = document.querySelector('.preload');
        preload.classList.add('preload-finish');
        
});`
 

CSS

     .preload    {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #77b3d4;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.preload h3 {
    position: absolute;
    top: 75%;
    transform: translateY(-75%);
    color: white;
    font-size: 40px;
    font-family: sans-serif;
}

.preload-finish {
    opacity: 0;
    pointer-events: none;
}
 

Вы также можете использовать функцию setTimeout() javascript:

 window.addEventListener('load', () => {
        const preload = document.querySelector('.preload');
        setTimeout( function() {
            preload.classList.add('preload-finish');
        }, 1000 );
});
 

Измените значение 1000 в конце на любое число, которое вам нравится, чтобы установить задержку в миллисекундах. Вот учебное пособие от w3schools https://www.w3schools.com/jsref/met_win_settimeout.asp

одним из решений является то, что вы можете добавить свойство задержки перехода в .preload-finish, как в примере ниже: вы можете определить значение в секундах или миллисекундах.

 .preload-finish {
    opacity: 0;
    pointer-events: none;
    transition-delay: 2s;
} 

Вот статья, в которой вы можете прочитать больше об этом свойстве. Сегодня он поддерживается всеми браузерами, поэтому вам не нужны никакие префиксы. https://www.w3schools.com/cssref/css3_pr_transition-delay.asp