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

最新推荐文章于 2024-07-14 02:58:10 发布

sunshine-huang

最新推荐文章于 2024-07-14 02:58:10 发布

阅读量1.7w

点赞数 9

分类专栏： js

本文链接：https://blog.csdn.net/u011108439/article/details/50994919

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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