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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
详解webpack 多入口配置
Jun 16 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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 date函数参数详解
2006/11/27 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jquery加载页面的方法(页面加载完成就执行)
2011/06/21 Javascript
js 函数的副作用分析
2011/08/23 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
wxpython实现图书管理系统
2018/03/12 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
工厂标语大全
2014/10/06 职场文书
感谢信模板大全
2015/01/23 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2019公司管理制度
2019/04/19 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
Pandas数据类型之category的用法
2021/06/28 Python
Python sklearn分类决策树方法详解
2022/09/23 Python