加载屏幕的最短时间

Question

我正在想办法解决这个问题。。(这里是超级初学者(。我在我的网站上有一个加载屏幕，当页面加载时，它是可见的，当加载完成后，加载程序所在的div就会隐藏起来。我想在加载程序上有一些内容，所以我需要它在消失之前在屏幕上停留至少5-8秒。

这是代码：

//LOADING
document.onreadystatechange = function() {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#loader").style.visibility = "visible";
} else {
document.querySelector("#loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
}
};

/*LOADER*/
#loader {
background-color: #e0e0e0;
width: 100vw;
height: 100vh;
}

<!--LOADING-->
<div id="loader"> Loader content </div>
<!--CONTENT-->
<div class="content">Content</div>

任何帮助都将不胜感激，提前感谢：(

Answer 1

以下代码将在显示实际内容之前显示加载程序内容5秒钟。唯一的变化是将CCD_ 1添加到在文档的readystate设置为"0"之后运行的代码中；完整"；。

//LOADING
document.onreadystatechange = function() {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#loader").style.visibility = "visible";
} else {
setTimeout(()=>{
document.querySelector("#loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
}, 5000)
}
};

/*LOADER*/
#loader {
background-color: #e0e0e0;
width: 100vw;
height: 100vh;
}

<!--LOADING-->
<div id="loader"> Loader content </div>
<!--CONTENT-->
<div class="content">Content</div>