加载 div 页面，该页面显示直到页面完全加载加上两秒钟答案

【问题标题】：Loading div page that shows until the page has loaded fully PLUS two seconds加载 div 页面，该页面显示直到页面完全加载加上两秒钟
【发布时间】：2021-01-25 12:22:26
【问题描述】：

我想要一个 Loading div 页面，该页面会显示直到页面完全加载加上两秒钟。

直到完全加载。 JS、CSS、HTML，一应俱全。

感谢我接受的答案 + 两个答案相结合！

【问题讨论】：

这能回答你的问题吗？ JavaScript Loading Screen while page loads

标签： javascript html css loading

【解决方案1】：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<style type="text/css">
    #mask {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        background: #000;
        opacity:0.2;
    }
    #loading {
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        border: solid 1px #000;
        background: #333;
        color:#FFF;
    }
</style>
<script type="text/javascript">
    window.addEventListener("load", function(args){
        window.setTimeout(function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("mask").style.display = "none";
        }, 2000);
    });
</script>
<div id="mask">

</div>
<div id="loading">
loading
</div>
<button onclick="javascript:alert('OK')">Click Me</button>
</body>
</html>

【讨论】：

会在页面完全加载完成后再显示，然后等待两秒钟然后隐藏 div 并显示页面吗？！
到目前为止工作正常。我希望它在页面前面显示，所以你不能点击页面上的任何其他内容，居中和整个页面背景为黑色，而它在那里？这可能吗？
看我的例子。

【解决方案2】：

您可以通过 Javascript onreadystatechange 事件来实现。查看以下示例代码：

document.onreadystatechange = function () {
  // page fully load
  if (document.readyState == "complete") {
    // hide loader after 2 seconds
    setTimeout(function(){ 
      document.getElementById('loader').style.display = 'none';
    }, 2000);
  }
}

#loader{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}

&lt;div id="loader"&gt;&lt;/div&gt;

【讨论】：

谢谢我试一试，你知道我如何使用答案 1（已接受）并这样做：我希望它像它一样显示在页面前面，所以你不能单击页面上的其他任何内容，居中且整个页面背景为黑色，而它在那里？这可能吗？