Loading原理

来源:互联网 发布:方正静蕾体 mac版 编辑:程序博客网 时间:2024/06/13 03:19

分析:首先分两个层,第一个层用来提示页面加载中......

第二个页面用于显示要加载的内容,如真正的网页内容,可以全部放在此层中,body的onload时间中显示第一层,隐藏第二层,等页面加载到</body>前,显示第二层,隐藏第一层,从而实现页面加载提示,而非显示部分网页..

具体示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript" type="text/javascript">

function showAllContent(status1,status2)
{
 document.getElementByIdx("showContent").style.display=status1;
 document.getElementByIdx("showLoad").style.display=status2;
}
</script>
</head>
<body onLoad='showAllContent("","none")'>
<div id="showLoad" style="z-index:2; display:block; width:auto; height:auto;">页面加载中......</div>
<div id="showContent" style="z-index:1; ">
最终要显示的内容
</div>
<script>showAllContent("none","");</script>
</body>
</html>

0 0