正在加载 div 页面，直到页面完全加载加两秒

Question

我想要一个正在加载 div 的页面，它会一直显示到页面完全加载完再加两秒。

直到完全加载。 JS，CSS，HTML，全部。

回答感谢我接受的答案+回答两个合并！

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

Answer 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);
}

<div id="loader"></div>

正在加载 div 页面，直到页面完全加载加两秒

Loading div page that shows until the page has loaded fully PLUS two seconds

html

javascript

css

loading