起航天空已经支持顶部进度条

背景

最近由于被其他人提醒原来的加载层遮罩不是很好，因此重新选择使用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并且更方便，实际上我朋友就是使用的这个，具体链接在：

xiebruce的pace.js和实现文章