首頁 > web前端 > js教程 > 图片加载进度实时显示_javascript技巧

图片加载进度实时显示_javascript技巧

PHP中文网
發布: 2016-05-16 19:27:36
原創
1482 人瀏覽過

<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=&#39;"+imgs[i].src+"&#39;>"  }}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>
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板