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


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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
理解javascript正则表达式
Mar 08 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
JavaScript中的高级函数
Jan 04 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
再次研究下cache_lite
2007/02/14 PHP
如何让CI框架支持service层
2014/10/29 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
python使用pil库实现图片合成实例代码
2018/01/20 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
高中自我评价范文
2014/01/27 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
群众路线剖析材料
2014/02/02 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
护理专业求职信
2014/06/15 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android