页面加载进度条实现原理：
将要加载的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>
代码示例：
<!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>
