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


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伸缩导航练习示例
Nov 13 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Openlayers显示瓦片网格信息的方法
Sep 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
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php查询whois信息的方法
2015/06/08 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python保存二维数组到txt文件中的方法
2018/11/15 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
华为的Java面试题
2014/03/07 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
质量提升方案
2014/06/16 职场文书
关于旅游的活动方案
2014/08/15 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
介绍信如何写
2015/01/31 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
合作合同协议书
2016/03/21 职场文书
创业计划书之家政服务
2019/09/18 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
MySQL 字符集 character
2022/05/04 MySQL