加载页面等待效果

最新推荐文章于 2024-03-19 21:39:09 发布

luckystar2008

最新推荐文章于 2024-03-19 21:39:09 发布

阅读量5.4k

点赞数

文章标签： generator html 文档 function class

本文链接：https://blog.csdn.net/qincidong/article/details/6778477

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

当一个页面数据量太大时，可能需要加载较长时间，这期间看到的将是白屏，很不好吧。
可以使用下面内容在页面加载时展示一些其他的东西，让人知道页面还在加载，而不是页面死了。或没有数据。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
	<style>
		.loadpagediv {
			display:none;
			position:absolute;
			top:30%;
			left:40%;
			width:25%;
			height:10%;
			background-color:green;
			border:10px solid blue;
			color:red;
		}
	</style>
	<script>
		var id = setTimeout('loadPage()',100);
		function loadPage() {
			// 取得文档载入状态，如果载入完成，则readystate='complete'
			// 根据这个可以定时去获取文档载入状态，来实现页面载入等待效果
			var readystate = document.readyState.toLowerCase();
			if (readystate == 'complete')
			{
				clearTimeout(id);
				document.getElementById('loadpagediv').style.display =  "none";
			}
			else {
				document.getElementById('loadpagediv').style.display =  "block";
				id = setTimeout('loadPage()',100);
			}

		}
	</script>
</head>

<body>
	<div id="loadpagediv" class="loadpagediv">
		正在加载页面。。。
	</div>
</body>
<iframe src="http://www.google.com" style="position:absolute;top:200px;left:200px;width:400px;height:200px;"></iframe>
</html>

luckystar2008

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
加载页面等待效果

当一个页面数据量太大时，可能需要加载较长时间，这期间看到的将是白屏，很不好吧。可以使用下面内容在页面加载时展示一些其他的东西，让人知道页面还在加载，而不是页面死了。或没有数据。 New Document .loadpagediv
复制链接

扫一扫