加载屏幕的最短时间

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

以下代码将在显示实际内容之前显示 loader 内容 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>