自己动手制作基于jQuery的Web页面加载进度条插件
更新时间：2016年06月03日 19:14:44 作者：Aaron
进度条插件在GitHub上多种多样数量繁多,这总结出页面进度条插件的实现要点,来教大家自己动手制作基于jQuery的Web页面加载进度条插件
静态效果的实现
网页顶部加载进度条，近年来很流行，很多网站都采用了这种加载方式。网上也有这样类似的插件，今天我们总结一下网页顶部线性页面加载进度条。
大体的写法如下：
body{
margin:0;
}
#progress {
position:fixed;
height: 2px;
background:#2085c5;
transition:opacity 500ms linear
}
#progress.done {
opacity:0
}
#progress span {
position:absolute;
height:2px;
-webkit-box-shadow:#2085c5 1px 0 6px 1px;
-webkit-border-radius:100%;
opacity:1;
width:150px;
right:-10px;
-webkit-animation:pulse 2s ease-out 0s infinite;
}
@-webkit-keyframes pulse {
30% {
opacity:.6
}
60% {
opacity:0;
}
100% {
opacity:.6
}
}
html代码：
<div id="progress">
<span></span>
</div>
jquery代码：
$({property: 0}).animate({property: 100}, {
duration: 3000,
step: function() {
var percentage = Math.round(this.property);
$('#progress').css('width', percentage+"%");
if(percentage == 100) {
$("#progress").addClass("done");//完成，隐藏进度条
}
}
});
设定其持续时间是3秒钟！你可以改动一下，把3秒钟的时间改成你网页的加载时间，就可以做出网页动态加载进度条了。。
页面加载插件的实际应用及load函数的运用
关于页面的加载，很难找到一个很好的方法来获取页面的实际下载进度。下面介绍的方法是运用 $(window).load(function() {})和$(document).ready(function(){})来进行的，虽然这种方法不是很准确，但是也可以模拟网页的下载。
$(function(){
NProgress.start();
})
$(window).load(function() {
NProgress.done();
})
有很多朋友可能对 $(window).load(function() {})和$(document).ready(function(){})的区别不是很了解。大家可以写一个小案例来测试一下！
例如：
$(window).load(function() {
alert("我是load")
})
$(function(){
alert("我是document.ready")
})
很明显，肯定是document.ready先执行，因为document.ready是在DOM结构载入完后执行的，不需要载入得这么“完全”，而$(window).load则是页面全部内容加载完成后执行的。
有时候，
$(window).load(function() {
alert("我是load")
})
也可以用js的写法：
window.onload = function(){ ... }
都是在页面全部下载完成之后来执行的。两种写法是等价的！
相关文章
jquery的键盘事件修改代码，需要的朋友可以参考下。2011-02-02
这篇文章主要介绍了jquery调取json数据实现省市级联的方法,可实现读取json数据绑定到下拉菜单的功能,非常具有实用价值,需要的朋友可以参考下2015-01-01
jQuery 的选择器可谓之强大无比，本文给大家总结下jQuery选择器之常用元素查找方法，非常不错，感兴趣的朋友一起学习吧2016-08-08
下面小编就为大家带来一篇Web前端新人笔记之jquery入门心得(新手必看)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
jQuery如何实现点击页面获得当前点击元素的id或其他信息
点击页面获得当前点击元素的id或者其他信息，使用jquery可以轻松做到这一点，下面有个不错的示例，希望对大家有所帮助2014-01-01
这篇文章主要介绍了jquery京东商城双11焦点图多图广告特效，一个精致的焦点图会吸引用户的注意力，让用户产生浏览网站的兴趣至关重要，现在小编推荐给大家一款特别棒的焦点图，感兴趣的小伙伴可以参考下。2015-09-09
这篇文章主要介绍了jQuery过滤选择器用法,包括可见性过滤:hidden、:visible,包含过滤:contains等各种常用的过滤选择器,需要的朋友可以参考下2016-09-09
本篇文章是对用jquery实现简单的ajax的实现方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
这篇文章主要介绍了bootstrap table sum总数量统计实现方法,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下2015-12-12
最新评论