网页加载时页面显示进度条加载完成之后显示网页内容
更新时间：2012年12月23日 16:59:15 作者：
网页加载时页面显示进度条（加载完成时显示网页内容）,这种效果在浏览网页很常见，本文也介绍一种实现方法，需要了解的朋友可以参考下
现在网上有很多网页加载进度条 ，但大多都是时间固定的。
下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。
<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="">
下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。
复制代码 代码如下:
<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="">
相关文章
这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
JavaScript中利用Array和Object实现Map的方法
这篇文章主要介绍了JavaScript中利用Array和Object实现Map的方法,实例分析了javascript实现map的添加、获取、移除、清空、遍历等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
前台js改变Session的值,有很多的新手朋友对此问题会很陌生，本文将提供解决方法，需要了解的朋友可以参考下2012-12-12
本文主要介绍了JavaScript实现绘制两个坐标之间的连线功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了Js模块化的作用原理和方案，对JS模块化感兴趣的同学，可以参考下2021-04-04
下面小编就为大家带来一篇js自调用匿名函数的三种写法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
如果不需要显示调用函数， 让这个函数在定义的时候就执行的话， 该如何写才可以呢，下面为大家介绍下具体的实现步骤，喜欢的朋友可以了解下2014-01-01
这篇文章主要为大家介绍了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在本篇文章里小编给大家整理了关于JavaScript实现的3D旋转魔方动画效果实例代码，有兴趣的朋友们测试下。2019-07-07
本文主要介绍了JavaScript中表格文件导出的实现示例,JavaScript中的Blob对象和a标签的download属性是实现这一功能的关键,本文就来详细的介绍一下,感兴趣的可以了解一下2024-01-01
最新评论