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


Posted in Javascript onDecember 23, 2012

现在网上有很多网页加载进度条 ,但大多都是时间固定的。
下面的当查询大量数据时,网页加载较慢,在网页加载时,显示进度条,当网页加载完成时,进度条消失,显示网页已经加载完成的内容。

<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="">
Javascript 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 #Javascript
javascript小数四舍五入多种方法实现
Dec 23 #Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 #Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 #Javascript
JavaScript执行效率与性能提升方案
Dec 21 #Javascript
You might like
9个经典的PHP代码片段分享
2014/12/18 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python连接池实现示例程序
2013/11/26 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Django如何自定义分页
2018/09/25 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
在校大学生的职业生涯规划书
2014/03/14 职场文书
建筑横幅标语
2014/10/09 职场文书
防汛通知
2015/04/25 职场文书
小学教育见习总结
2015/06/23 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
物业管理交接协议书
2016/03/24 职场文书
导游词之任弼时故居
2020/01/07 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL