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


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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
深入理解vue路由的使用
Mar 24 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Django实现快速分页的方法实例
2017/10/22 Python
Python字符串的修改方法实例
2019/12/19 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Java程序员综合测试题
2014/04/25 面试题
老公给老婆的保证书
2014/04/28 职场文书
技校毕业生自荐书
2014/05/23 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python