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 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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
关于手调机和数调机的选择
2021/03/02 无线电
DIY实用性框形天线
2021/03/02 无线电
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
后勤园长自我鉴定
2013/10/17 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
给同学的道歉信
2014/01/16 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
党员对照检查材料
2014/09/22 职场文书
社会工作专业自荐信
2014/09/26 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
高中班主任评语
2014/12/30 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2015年工会工作总结
2015/03/30 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers