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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
用户注册常用javascript代码
Aug 29 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
JS重载实现方法分析
Dec 16 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
JavaScript canvas绘制折线图
Feb 18 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
javascript window对象属性整理
2009/10/24 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python正则分析nginx的访问日志
2017/01/17 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Java如何获得ResultSet的总行数
2016/09/03 面试题
留学自荐信的技巧
2013/10/17 职场文书
新闻编辑自荐信
2013/11/03 职场文书
优秀团队获奖感言
2014/02/19 职场文书
项目施工员岗位职责
2014/03/09 职场文书
初三班主任寄语大全
2014/04/04 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
安全保证书
2015/01/16 职场文书
海洋天堂观后感
2015/06/05 职场文书
2016年公司新年寄语
2015/08/17 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android