管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

网页加载时页面显示进度条加载完成之后显示网页内容

　　现在网上有很多网页加载进度条 ，但大多都是时间固定的。

　　下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。

　　

复制代码 代码如下:

　　<html>

　　<script language=VBScript>

　　Dim Bar, SP

　　Bar = 0

　　SP = 100

　　Function Window_onLoad()

　　Bar = 95

　　SP = 10

　　End Function

　　Function Count()

　　if Bar < 100 Then

　　Bar = Bar + 1

　　setTimeout "Count()", SP

　　else

　　document.getElementById("jdt").style.display="none"

　　document.getElementById("content").style.display=""

　　end if

　　End Function

　　Call Count()

　　</script>

　　<body>

　　<div id="jdt" >此处显示进度条，也可以放一张动态图片</div>

　　<div id="content" style="display:none">网页真正显示的内容</div>

　　</body>

　　</html>

　　----------------------------------------------------

　　最简单的就是放图片，网页加载完成隐藏图片，显示网页内容

　　

复制代码 代码如下:

　　<body onLoad="loadDiv.style.display='none';" style="margin:0px;">

　　<style type="text/css">

　　#loadDiv {

　　position:absolute;

　　z-index:999;

　　width:expression(document.body.clientWidth);

　　height:expression(document.body.clientHeight);

　　background-color:#FFFFFF;

　　text-align:center;

　　padding-top:200px;

　　}

　　</style>

　　<div id="loadDiv"><img src="http://www.51ajax.com/images/rss/loading.gif"> Loading...</div>

　　<iframe src="http://505551735.qzone.qq.com/" >

　　</iframe>

　　</body>

　　-------------------------------------------------------

　　

复制代码 代码如下:

　　<html>

　　<script language=JavaScript>

　　function Loaded()

　　{

　　document.getElementById("loadDiv").style.display="none"

　　document.getElementById("content").style.display=""

　　}

　　</script>

　　<body onLoad="Loaded()">

　　<div id="loadDiv" style="display:block"><img src="http://www.51ajax.com/images/rss/loading.gif"> Loading...</div>

　　<iframe id="content" style="display:none" src="">

教程首页 更多教程