繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery 页面载入进度条实现代码
- Javascript
- JavaScript 仿歌词效果
- javascript 网页上跳动的文字
- jquery 屏蔽一个区域内的所有元素，禁止输入
- VBScript 实现文字遮罩
- 用按钮触发Javascript动态生成一个表格的代码
- 文字瞬间从左到右切换显示的JavaScript代码
- jquery 插件开发方法小结
- JS 操作日期 顺便实现 上一周 和 下一周 功能
- struts2 jquery 打造无限层次的树
- js文件中调用js的实现方法小结
- 写入cookie的JavaScript代码库 cookieLibrary.js
- LazyForm jQuery plugin 定制您的CheckBox Radio和Select
- javascript Keycode对照表
- JavaScript 动态添加表格行 使用模板、标记
- JS window.opener返回父页面的应用
- JavaScript 高仿真可控弹簧振子实现代码
- 利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值
- JavaScript 图片放大效果及代码说明
- js 操作符实例代码
- JavaScript 文本域字体大小选择功能
Javascript 中的 jQuery 页面载入进度条实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 202 ::
收藏到网摘: n/a
页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：
复制代码 代码如下:
<div id="loading"><div></div></div>
CSS 可以这么写：
复制代码 代码如下:
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：
复制代码 代码如下:
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：
复制代码 代码如下:
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
评论 (0) All
