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输入法的bug的触发及解决
Jul 24 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
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
我的论坛源代码(三)
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php微信开发之谷歌测距
2018/06/14 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
简单了解Django模板的使用
2017/12/20 Python
Python的形参和实参使用方式
2019/12/24 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python能开发游戏吗
2020/06/11 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
生物学学生自我评价
2014/01/17 职场文书
安全宣传标语
2014/06/10 职场文书
保险专业求职信
2014/07/07 职场文书
乐山大佛导游词
2015/02/02 职场文书
清洁工岗位职责
2015/02/13 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
廉政承诺书2015
2015/04/28 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Python上下文管理器Content Manager
2021/06/26 Python