js其实是没法计算到网页的加载进度的。
目前见到的打开页面显示进度的有两种
1、如果是flash做的，那是flash自身的加载进度。
2、如果是js做的，做法比较简单，就是在页面的不同的地方插入script标签，动态改变进度的值。
<html><head>
<script>
var processPer = 0
window.onload = function(){
document.getElementById('process').innerHTML = processPer
}
</script>
</head>
<body>
<div id="process"></div>
<div></div>
....
<script>
processPer = 30
document.getElementById('process').innerHTML = processPer
</script>
<div></div>
....
<div></div>
....
<script>
processPer = 100
document.getElementById('process').innerHTML = processPer
</script>
</body>
</html>
类似这样的，就可以实现了进度的动态改变。
思路：进度条的总长度：进度条的当前长度 = 数据总长度：数据当前加载长度。
代码：
<style>* {margin:0px padding:0px}
.box {height:40px width:500px background:#ccc border:1px solid #ccc position:relative margin:100px auto}
.box #div1 {height:100% width:0% background:green }
span {position:absolute top:0 left:0 line-height:40px width:100% height:100% text-align:center font-size:28px font-weight:bold color:#fff}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1')
var oTxt = document.getElementById('txt')
var count = 0
var total = 77
for(var i=0i<77i++)
{
var oImg = new Image()
oImg.src= 'http://www.zhinengshe.com/works/3525/img/'+i+'.jpg'
oImg.onload=function(){
count++
oDiv.style.width= Math.floor((count/total)*100) + '%'
oTxt.innerHTML = Math.floor((count/total)*100) + '%'
}
}
}
</script>
</head>
<body>
<div class="box">
<div id="div1"></div>
<span id="txt"></span>
</div>
</body>
