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

Question

I would like a Loading div page that shows until the page has loaded fully PLUS two seconds.我想要一个加载 div 页面，该页面显示直到页面完全加载加上两秒钟。

Until fully loaded.直到满载。 JS, CSS, HTML, the whole lot. JS，CSS，HTML，全部。

Answered with thanks to my accepted answer + answer two combined!感谢我接受的答案+答案两个相结合！

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

You can do it by Javascript onreadystatechange event.您可以通过 Javascript onreadystatechange事件来做到这一点。 Check below example code:检查下面的示例代码：

 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 页面，该页面显示直到页面完全加载加上两秒钟

问题描述

2 个解决方案

解决方案1
2 已采纳 2021-01-25 12:28:17

解决方案2
1 2021-01-25 12:33:14

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2021-01-25 12:28:17

解决方案2 1 2021-01-25 12:33:14

解决方案1
2 已采纳 2021-01-25 12:28:17

解决方案2
1 2021-01-25 12:33:14