用js判断页面是否加载完成

来源：互联网发布：如何解除8080端口占用编辑：程序博客网时间：2024/04/29 04:08

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>loading……demo</title>    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><script type="text/javascript" src="js/jquery.js"></script></head><body>    <div class="wrap"><section class="home"></section>    </div>    <div class="loading">    <p>loading……</p>    </div></body></html>

很偶然的机会和白开聊到怎么去判断页面加载完成后再将页面内容显示出来，今天突然想到这个就随手写了一个简单的demo，原来竟是这么简单，而自己却一直没去整过，总算是明白了，原来自己已菜了这么久

*{padding: 0; margin:0;}html{font-size: 40px;}body, html{width: 100%; height: 100%;}.wrap{ position: relative; width:100%; height:100%;}.home{width: 100%; height:100%; background: url(images/bg.jpg) no-repeat; background-size: 100% 100%;}.loading{position: absolute; width: 100%; height: 100%; background: #fff; z-index: 99;}.loading p{position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); text-align: center; color: #222; font-size:0.8rem;}

document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法.    function loadingChange() { if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 $(".loading").hide();//当页面加载完成后将loading页隐藏} }

0 0