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


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 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JS Object构造函数之Object.freeze
Apr 28 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
我的论坛源代码(一)
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP 事件机制(2)
2011/03/23 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
一段实用的php验证码函数
2016/05/19 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
医院护士工作检讨书
2014/10/26 职场文书
党的群众路线调研报告
2014/11/03 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript