如何在"加载"事件侦听器上添加时间，以便始终看到网站的预加载介绍？

Question

let loader = document.getElementById("preloader");
window.addEventListener("load", function () { loader.style.display = "none"; });

我正试图为我的网页创建一个预加载器介绍，这只是一个div与背景gif，但页面总是加载太快，看不到它。

我不确定如何将时间添加到负载上，或者如果我需要使用不同的功能来实现我想要的结果。

Answer 1

听起来像是setTimeout的工作!这里我隐藏预加载器与一个函数，只有当这两个事情都为真:窗口加载和2秒超时运行。

let loaded = false
let enoughTimePassed = false
window.addEventListener("load", function() {
if (enoughTimePassed) { hidePreloader() }
loaded = true
})
setTimeout(() => {
if (loaded) { hidePreloader() }
enoughTimePassed = true
}, 2000)
function hidePreloader() {
document.getElementById("preloader").remove()
}

#preloader {
background: white;
position: fixed;
top: 0;
height: 2em;
}

<div id="preloader">Loading...</div>
<div>LOADED</div>