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

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


背景

最近由于被其他人提醒原来的加载层遮罩不是很好,因此重新选择使用NProgress.js,来实现顶部进度条。

实现方法

NProgress.js的使用很简单,其实就是引入一个NProgress.jsNProgress.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和实现文章

0 0 vote
Article Rating
订阅
提醒
guest
0 评论
Inline Feedbacks
View all comments

扫码二维码快速访问本页

起航天空已经支持顶部进度条 – 起航天空
0
Would love your thoughts, please comment.x
()
x