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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
js实现带简单弹性运动的导航条
Feb 22 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 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中用正则表达式清除字符串的空白
2011/01/17 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
js TextArea的选中区域处理
2010/12/28 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
Python Queue模块详解
2014/11/30 Python
理解Python垃圾回收机制
2016/02/12 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python 自定义装饰器实例详解
2019/07/20 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
师范应届生求职信
2013/11/15 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
宣传委员竞选稿
2015/11/19 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python