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


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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
详解javascript函数写法大全
Mar 25 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python原始套接字编程实例解析
2020/01/29 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
2014年团支书工作总结
2014/11/14 职场文书
小学母亲节活动总结
2015/02/10 职场文书
食品卫生管理制度
2015/08/06 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript