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


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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
react中的DOM操作实现
Jun 30 Javascript
JavaScript流程控制(分支)
Dec 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
基于initPHP的框架介绍
2013/04/18 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
Prototype框架详解
2015/11/25 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
华三通信H3C面试题
2015/05/15 面试题
历史学专业推荐信
2013/11/06 职场文书
学生出入校管理制度
2014/01/16 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
行政诉讼答辩状
2015/05/21 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers