这里是文章内页的小广告~

javascript实现在图片读取的时候出现进度条....

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

<title>JS实现的图片加载进度条_网页代码站(http://www.frontopen.com</title>
<script>
var l=0;
var imgs;
var sum=0;
function chk(){
document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
l--;
if (l==0){
for (var i=0;i<imgs.length;i++){
imgs[i].style.display='';
}
}
}
</script>
<body>
<img src="/images/wall1.jpg"/>
<img src="/images/wall2.jpg"/>
<div id="aa"></div>
<script>
imgs=document.getElementsByTagName("img");
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功,都执行指定方法
imgs[i].style.display='none';
}
</script>
<br />
<p><a href="ww.frontopen.com">网页前端代码站.前端开拓者</a></p>
</body>