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


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 相关文章推荐
尝试在让script的type属性等于text/html
Jan 15 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
js实现百度搜索提示框
Feb 05 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
详解webpack+express多页站点开发
Dec 22 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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
一个用于网络的工具函数库
2006/10/09 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
产品设计开发计划书
2014/05/07 职场文书
美化环境标语
2014/06/20 职场文书
会计学习心得体会
2014/09/09 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
会议室使用管理制度
2015/08/06 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
JS中如何优雅的使用async await详解
2021/10/05 Javascript