思路：进度条的总长度：进度条的当前长度 = 数据总长度：数据当前加载长度。
代码：
<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>
这个很难实现的，因为要想实现准确的进度条，就必须知道要下载的总字节数和当前已下载的字节数，总字节数除了html文件本身，还有里面的各种对象如图片、动画、css文件、js文件等的字节数，还要区分哪些是从电脑的cache取出的，哪些是从服务器下载的，有些数据要等到页面完全下载完毕才能得到，这马后炮有什么用呢。IE浏览器本身的进度条都无法做到准确呢，何况用JS？一般都是用个动态GIF图片或Falsh循环滚动一下糊弄糊弄用户就行了。我还没见过能精确计算出加载进度的网站，如果有，那我只能说他们糊弄的技术很牛B
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）