如何为预加载器添加延迟，以便即使在页面加载几秒钟后预加载器也会显示

Question

我正在尝试向我的预加载器添加延迟，以使页面具有很酷的效果。 即使在页面加载后，我也希望预加载器显示几秒钟。 我有预加载器，它工作正常我只需要一些帮助来增加延迟。

这是我当前的代码。

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;
}

Answer 1

一种解决方案是您可以在.preload-finish 上添加一个转换延迟属性，如下例所示：您可以以秒或毫秒为单位定义值。

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

这是一篇文章，您可以在其中阅读有关此属性的更多信息。 今天所有的浏览器都支持它，所以你不需要任何前缀。 https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

Answer 2

您还可以使用setTimeout() javascript function：

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