Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
223 views
in Technique[技术] by (71.8m points)

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

I would like a Loading div page that shows until the page has loaded fully PLUS two seconds.

Until fully loaded. JS, CSS, HTML, the whole lot.


Answered with thanks to my accepted answer + answer two combined!

question from:https://stackoverflow.com/questions/65884719/loading-div-page-that-shows-until-the-page-has-loaded-fully-plus-two-seconds

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
<!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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...