放大镜站内搜索：

您现在的位置：首页 > 电脑 > 网页制作 > 正文
[js效果] 图片加载进度实时显示
学生王国 ∥ http://www.xswg.com 更新时间:2006年8月4日 调整字体：大 中 小

<script>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
function chk(){
  l--;
  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
  if (l==0){
     for (var i=0;i<sum;i++)
       document.body.innerHTML+="<img src='"+imgs[i].src+"'>"
  }
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
imgs[5]=new Image()
imgs[6]=new Image()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}

</script>
<body>
<div id="aa">0%</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
  imgs[i].onload=chk;
  imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>

效果：

运行代码：

<script>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
function chk(){
  l--;
  document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
  if (l==0){
     for (var i=0;i<sum;i++)
       document.body.innerHTML+="<img src='"+imgs[i].src+"'>"
  }
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
imgs[5]=new Image()
imgs[6]=new Image()
imgs[7]=new Image()
imgs[0].src="/articleimg/2006/08/3859/01.jpg";
imgs[1].src="/articleimg/2006/08/3859/02.jpg";
imgs[2].src="/articleimg/2006/08/3859/03.jpg";
imgs[3].src="/articleimg/2006/08/3859/04.jpg";
imgs[4].src="/articleimg/2006/08/3859/05.jpg";
imgs[5].src="/articleimg/2006/08/3859/06.jpg";
imgs[6].src="/articleimg/2006/08/3859/07.jpg";
imgs[7].src="/articleimg/2006/08/3859/08.jpg";
}

</script>
<body>
<div id="aa">0%</div>

共2共  1 2 下一页


相关链接：
来自：蓝色理想
编辑：婷儿
浏览：
评论查看全部评论
您的评论
姓名：
请您注意：
1.请遵守《中国互联网行业自律条款》及中华人民共和国其他各项有关法律法规。
2.严禁发表危害国家安全、损害国家利益、破坏民族团结、破坏国家宗教政策、破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容的评论 。
3.用户需对自己在使用本站服务过程中的行为承担法律责任（直接或间接导致的）。
4.本站管理员有权保留或删除评论内容。
评论内容只代表网友个人观点，与本网站立场无关。