页面加载进度条改进版

html部分：

<div id="loadingbg"></div>
<div id="test"><div></div><span>0%</span></div>

 

js部分：

    var arr =[ 
        {
            "msrc":"*.css",
            "mtype":"css",
            "mpos":0
        },
        {
            "msrc":"*.js",
            "mtype":"css",
            "mpos":0
        },
        {
            "msrc":"*.js",
            "mtype":"js",
            "mpos":0
        }
    ];

    var marr = new Array(); // 标记arr中的是否加载完毕
    var maxtime = 20000;  // 设置加载失败时间20秒
    var timing = 0; // 记录当前的时间
    var mtest = document.getElementById("test");  //  进度条容器
    var mtestdiv = mtest.getElementsByTagName("div")[0];  // 进度条线
    var mtestspan = mtest.getElementsByTagName("span")[0]; // 进度条数字
    var mloadingbg = document.getElementById("loadingbg");

    for(var i =0,j=arr.length;i<j;i++){  // 初始化数组，并将每一项的值都设为false
        marr[i] = false;
    }

    function include_js(file,mtype,index) {  // 检测是否加载完成,并添加到head中
        var _doc = document.getElementsByTagName('head')[0];
        if(mtype==="js"){
            var js = document.createElement('script');
           
            js.setAttribute('type', 'text/javascript');
            js.async = false;
            js.setAttribute('src', file);
        
        
            if (document.all) { //如果是IE
                js.onload = js.onreadystatechange = function () {
                    if (js.readyState === 'complete' || js.readyState ==="loaded" ) {
                        marr[index] = true;
                    }
                }
            }
            else {
                js.onload = function () {
                    marr[index] = true;
                }
            }
            _doc.appendChild(js);
        }
        else if(mtype==="css"){
            var lk = document.createElement('link');
            lk.setAttribute('rel', 'stylesheet');
            lk.setAttribute('href', file);
            lk.async = false;
        
            if (document.all) { //如果是IE
                lk.onreadystatechange = function () {
                    if (lk.readyState === 'complete') {
                        marr[index] = true;
                    }
                }
            }
            else {
                lk.onload = function () {
                    marr[index] = true;
                }
            }
            _doc.appendChild(lk);
        }
    }


    var mindex = 0;
    var isone = true;

    var stop = setInterval(function(){
        if(isone){
            isone = false;
            include_js(arr[mindex].msrc,arr[mindex].mtype,mindex);
            mindex++;
        }
        if(marr[mindex-1]){
            include_js(arr[mindex].msrc,arr[mindex].mtype,mindex);
            mindex++;
        }

        mtestspan.innerHTML= parseInt((mindex/marr.length)*100)+"%";
        mtestdiv.style.width = parseInt((mindex/marr.length)*100)+"%";
    
        if(mindex === marr.length){  // 加载完成
            setTimeout(function(){
                mloadingbg.parentNode.removeChild(mloadingbg);
                isone=true;
                clearInterval(stop);
            },200);
        }
        timing+=60;
        if(timing>maxtime){  //  加载失败
            clearInterval(stop);
            mtest.innerHTML= "页面加载失败！";
        }
    },60);