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 相关文章推荐
JavaScript操纵窗口的方法小结
Jun 28 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JavaScript中string对象
Jun 12 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
Js 本页面传值实现代码
2009/05/17 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python多线程操作实例
2014/11/21 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python比较两个列表是否相等的方法
2015/07/28 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
基于python3生成标签云代码解析
2020/02/18 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
小学生综合素质评语
2014/04/23 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏