Magix3版本加载进度插件

[xinglie]

该插件基本准确反映项目中加载及渲染的进度

kissy版本只需要把seajs.use改成kissy.use即可

使用方式一

通过script标签的方式直接引入到主页面上，如

<script src="path/to/??sea.js,jquery.js,magix.js"></script>
<script src="path/to/progressbar.js"></script>

使用方式二

通过magix提供的扩展机制加载，如

let Magix = require('magix');
Magix.boot({
    exts:['progbressbar']
});

以下是插件源码，保存成progressbar.js

seajs.use('magix', Magix => {
    let ProgressBar = {
        startChecker() {
            let me = this;
            me.$checker = setTimeout(function () {
                //这里处理长时间页面未加载完成的情况
            }, 3 * 60 * 1000);
        },
        stopChecker() {
            let me = this;
            clearTimeout(me.$checker);
        },
        progress(p) {
            console.log(p); //在这里更新进度条
            if (p == 1) {
                ProgressBar.stopChecker();
            }
        },
        hookScript() {
            let ce = document.createElement;
            document.createElement = tag => {
                if (tag.toUpperCase() === 'SCRIPT') {
                    if (ProgressBar.percent <= 0.97) {//小于97，随机前进
                        ProgressBar.percent += Math.random() * 0.05;
                    } else if (ProgressBar.percent >= 1) {//完成加载
                        document.createElement = ce;
                        ProgressBar.percent = 1;
                        ProgressBar.buffer.s = 1;
                    }
                    ProgressBar.updateProgress(ProgressBar.percent);
                }
                return ce.call(document, tag);
            };
        },
        shiftValue() {
            let len = ProgressBar.buffer.length;
            if (len) {
                if (len > 8) ProgressBar.buffer.splice(0, 2); //多于8个，删除2个，加速
                ProgressBar.progress(ProgressBar.buffer.shift());
                setTimeout(ProgressBar.shiftValue, 15);
            } else {
                ProgressBar.buffer.d = 0;
            }
        },
        updateProgress(p) {
            if (p != ProgressBar.last) {
                ProgressBar.buffer.push(ProgressBar.last = p);
                if (!ProgressBar.buffer.d) {
                    ProgressBar.buffer.d = setTimeout(ProgressBar.shiftValue, 15);
                }
            }
        },
        buffer: [],
        percent: 0,
        last: -1
    };
    let VframesCount = 0;
    let FirstVframesLoaded = 0;
    let LastPercent = 0;
    let FirstReady = 0;
    Magix.Vframe.on('add', e => {
        VframesCount++;
        let vframeCreated = () => {
            e.vframe.off('created', vframeCreated);
            if (!FirstReady) {
                FirstVframesLoaded++;
                let np = FirstVframesLoaded / VframesCount;
                if (LastPercent < np) {
                    FirstReady = (np == 1);
                    LastPercent = np;
                    let p = Math.max(np, ProgressBar.percent);
                    while (ProgressBar.percent < p) {
                        ProgressBar.percent += Math.random() * 0.03;
                        ProgressBar.updateProgress(ProgressBar.percent = Math.min(ProgressBar.percent, p));
                    }
                    ProgressBar.updateProgress(ProgressBar.percent = p);
                }
            }
        };
        e.vframe.on('created', vframeCreated);
    });
    Magix.Vframe.on('remove', e => {
        VframesCount--;
        if (e.fcc) FirstVframesLoaded--; //该处有问题，需要考虑在渲染过程中，直接把根vframe给销毁了，导致进度条中止在当前状态。解决办法是判断VframesCount，如果减到0则进度条为100%，但考虑到线上几乎没有这个需求，所以暂不修复
    });
    ProgressBar.hookScript();
    ProgressBar.startChecker();
});