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


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 相关文章推荐
JS中confirm,alert,prompt函数使用区别分析
Apr 01 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
javascript五图轮播切换实用版
2012/08/17 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
python实现教务管理系统
2018/03/12 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
tensorboard显示空白的解决
2020/02/15 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
军训自我鉴定
2014/01/22 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android