起航天空已经支持顶部进度条
背景
最近由于被其他人提醒原来的加载层遮罩不是很好,因此重新选择使用NProgress.js
,来实现顶部进度条。
实现方法
NProgress.js
的使用很简单,其实就是引入一个NProgress.js
和NProgress.css
,然后在body增加一些初始化程序,如:
<script src="/wp-content/themes/home/nprogress.js"></script>
<script type="text/javascript" language="JavaScript">
document.body.style.display = 'block';
_cancelwaitwpadminbar = false;
jQuery.fn.wait = function (func,cancelsatusfunction, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了,就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(cancelsatusfunction && cancelsatusfunction.call(func,times,interval)) { //检测是否应终止检测程序
clearInterval(_iIntervalID);
}
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
jQuery("#wpadminbar").wait(function() {
jQuery("#wpadminbar").css("top","2px");
_cancelwaitwpadminbar = true;
},function(func, times, interval) {
if(_cancelwaitwpadminbar) {
return true;
} else {
return false;
}
})
NProgress.start();
//: 判断网页是否加载完成
document.onreadystatechange = function() {
if (document.readyState == "complete") {
NProgress.done();
jQuery("#wpadminbar").css("top","0px");
_cancelwaitwpadminbar = true;
}
}
</script>
大家注意,我这里定义了一个等待函数jQuery.fn.wait
这份代码来自互联网,我在它基础上做了修改,加了一个取消函数,那么,什么是取消函数呢,其实如果接触过Windows API打印控制函数,就会听过所谓的“取消函数”,“取消函数”是一种回调函数,它能告诉某类处理程序是否终止的函数,我们这里增加了一个取消函数,用来终止wait函数的定时器,要不然,我们的wait函数在找不到DOM元素的时候,就要一直占用资源了,取消函数的定义如下:
function(func, times, interval) {
if(_cancelwaitwpadminbar) {
return true;
} else {
return false;
}
}
然后,在找到#wpadminbar
后,我们执行了以下代码:
function() {
jQuery("#wpadminbar").css("top","2px");
_cancelwaitwpadminbar = true;
}
这个函数设置了wpadminbar
元素,让他给顶部条让出2px
的空间,然后执行:
NProgress.start();
当然,我们还需要在页面完成加载后停止进度条,所以,我们需要检测页面加载是否完成,代码如下:
//: 判断网页是否加载完成
document.onreadystatechange = function() {
if (document.readyState == "complete") {
NProgress.done();
jQuery("#wpadminbar").css("top","0px");
_cancelwaitwpadminbar = true;
}
}
其实核心函数就是
NProgress.done();
然后我们会发生进度条停止了,但是在管理员登录的情况下,会因为之前我下移了2px
的空间出现一条缝,所以还需要执行这个代码:
jQuery("#wpadminbar").css("top","0px");
_cancelwaitwpadminbar = true;
总结
以上是起航天空实现顶部进度条的过程,此外,朋友提示我还可以使用pace.js
并且更方便,实际上我朋友就是使用的这个,具体链接在: