页面加载进度条

页面加载进度条实现原理：
将要加载的js动态的添加到head中，并根据每个是否加载完成，统计当前一共加载完成的个数。当每一项都加载完成，加载成功。
设置加载失败时间。当超过这个时间提示加载失败。

详细解释：

<!DOCTYPE html>
<html>
    <head>
        <title>页面加载进度条</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #test{height:20px; width: 200px;border:1px solid #666666; margin:300px auto;  font-size: 12px; position: relative;
                  text-align: center; line-height: 20px;}
            #test div{height:100%;width:0px; background: #FF0000;}
            #test span{display:block; height:100%; width: 100%; position: absolute; left: 0px; top: 0px;  z-index: -1px;}
        </style>
    </head>
    <body>
        <div id="test">
            <div></div>
            <span>0%</span>
        </div>
        <script>
            var arr =[ "http://www.huohu123.com/static/nav/js/jquery-1.4.2.min.js?v=5d204",
                "http://news.2hua.com/adiframe/163/NewsL04/01/js/BX.1.0.1.B.js",
                "http://c.cnzz.com/cnzz_core.php?web_id=3558971&l=none",
                "http://img1.126.net/channel7/insert560120_111012.js",
                "http://news.2hua.com/adiframe/163/NewsL03/01/js/BX.1.0.1.B.js",
                "http://www.google-analytics.com/ga.js"];
            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]; // 进度条数字
            for(var i =0,j=arr.length;i<j;i++){  // 初始化数组，并将每一项的值都设为false
                marr[i] = false;
            }
            function include_js(file,index) {  // 检测是否加载完成,并添加到head中
                var _doc = document.getElementsByTagName('head')[0];
                var js = document.createElement('script');
                js.setAttribute('type', 'text/javascript');
                js.setAttribute('src', file);
                _doc.appendChild(js);
                if (document.all) { //如果是IE
                    js.onreadystatechange = function () {
                        if (js.readyState == 'loaded' || js.readyState == 'complete') {
                            marr[index] = true;
                        }
                    }
                }
                else {
                    js.onload = function () {
                        marr[index] = true;
                    }
                }
            }

            for(var i = 0,j=arr.length;i<j;i++){  // 向head中添加每一项
                include_js(arr[i],i);
            }
             
            var stop = setInterval(function(){
                var index = 0;  // 统计当前的总共加载完毕的个数
                for(var i=0,j=marr.length;i<j;i++){
                    if(marr[i] === true){
                        index++;
                    }
                }
                            
                mtestspan.innerHTML= parseInt((index/marr.length)*100)+"%";
                mtestdiv.style.width = parseInt((index/marr.length)*100)*2+"px";

                if(index === marr.length){  // 加载完成
                    mtest.parentNode.removeChild(mtest);
                    clearInterval(stop);
                }
                
                timing+=60;
                if(timing>maxtime){  //  加载失败
                    clearInterval(stop);
                    mtest.innerHTML= "页面加载失败！";
                }
            },60);
        </script>
    </body>
</html>

代码示例：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kuikui/p/2765579.html