页面加载进度条
2012-11-11 22:52
99 查看
页面加载进度条实现原理：
将要加载的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>
运行代码
将要加载的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>
运行代码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Cocos2d-x CCProgressTimer实现页面加载进度条效果
- 基于jQuery实现模拟页面加载进度条
- [转]页面加载时，显示页面加载的进度
- 手撸一个预加载页面，酷炫环形进度条
- 仿YouTube页面加载 顶部进度条
- js页面加载进度条
- 经典页面加载显示进度条8例
- 自己动手制作基于jQuery的Web页面加载进度条插件
- 页面加载进度条
- Flex项目页面加载时引用Flash制作的进度动画
- 页面加载进度条改进版
- 页面加载时，显示页面加载的进度
- Android webview里加载显示网页，显示进度，点击网页链接跳转到app页面
- Flex 页面加载显示自定义进度条
- jsp页面加载readyState的五种状态根据我们状态添加进度条
- javascript实现页面加载进度条
- pace.js页面加载进度条插件
- Android仿微信公众号文章页面加载进度条
- 网页加载进度页面
- 页面加载时，添加进度条，提高用户体验