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


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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 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
终于听上了直流胆调频
2021/03/02 无线电
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python按行读取文件的简单实现方法
2016/06/22 Python
django实现前后台交互实例
2017/08/07 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
python查看模块安装位置的方法
2018/10/16 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
如何提高MySql的安全性
2014/06/19 面试题
新闻编辑求职信
2014/04/09 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
离职保密承诺书
2014/05/28 职场文书
球队口号
2014/06/18 职场文书
文明家庭事迹材料
2014/12/20 职场文书
承诺函格式模板
2015/01/21 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书