加载屏幕的最短时间答案

【问题标题】：Minimum time for loading screen加载屏幕的最短时间
【发布时间】：2021-05-19 14:22:27
【问题描述】：

我正在想办法解决这个问题..（这里是超级初学者）。我的网站上有一个加载屏幕，在页面加载时可见，当它加载完加载器所在的 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>

任何帮助将不胜感激，在此先感谢:)

【问题讨论】：

标签： javascript html css loader

【解决方案1】：

以下代码将在显示实际内容之前显示加载程序内容 5 秒。唯一的变化是将setTimeout 添加到在文档的就绪状态设置为“完成”后运行的代码中。

//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>

【讨论】：