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


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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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新手上路(五)
2006/10/09 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
php分页示例分享
2014/04/30 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
深入理解python try异常处理机制
2016/06/01 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
大学军训自我鉴定
2013/12/15 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
领导欢迎词致辞
2015/01/23 职场文书
端午节活动总结报告
2015/02/11 职场文书
小学运动会入场口号
2015/12/24 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python