jQuery 页面载入进度条实现代码


Posted in Javascript onFebruary 08, 2009

jQuery 页面载入进度条实现代码

上图展示了传统 Wordpress 模板在浏览器中的载入顺序,Loading 条的出现和消失分布于头尾。

jQuery 页面载入进度条实现代码


如果我们在页面的不同位置放置多个 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>

用于载入完毕后隐藏进度条。
Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
关于js类的定义
Jun 28 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
使用AOP改善javascript代码
May 01 Javascript
js给selected添加options的方法
May 06 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
JQuery 常用方法基础教程
Feb 06 #Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 #Javascript
javascript 学习之旅 (3)
Feb 05 #Javascript
javascript 学习之旅 (2)
Feb 05 #Javascript
javascript 学习之旅 (1)
Feb 05 #Javascript
JAVASCRIPT keycode总结
Feb 04 #Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 #Javascript
You might like
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python进度条的制作代码实例
2019/08/31 Python
Python __slots__的使用方法
2020/11/15 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
一套Java笔试题
2016/08/20 面试题
烹饪自我鉴定
2014/03/01 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
高中学生期末评语
2014/04/25 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
2014年技术员工作总结
2014/11/18 职场文书
用Python实现Newton插值法
2021/04/17 Python
Python实现单例模式的5种方法
2021/06/15 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
MySQL七大JOIN的具体使用
2022/02/28 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技