加载页面等待效果

最新推荐文章于 2022-12-06 17:58:57 发布

doymm2008

最新推荐文章于 2022-12-06 17:58:57 发布

阅读量6.6k

点赞数

分类专栏： js及界面技术

52 篇文章 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>