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


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实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
javascript执行环境及作用域详解
May 05 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 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
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
Javascript window对象详解
2014/11/12 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Django自定义分页效果
2017/06/27 Python
django模板语法学习之include示例详解
2017/12/17 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
2014年个人年终总结
2015/03/09 职场文书
军训新闻稿范文
2015/07/17 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
比较几种Redis集群方案
2021/06/21 Redis
小程序自定义轮播图圆点组件
2022/06/25 Javascript