您的位置：首页 > Web前端 > JavaScript

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

2016-03-27 23:53 811 查看

<!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页隐藏
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航