search

Home  >  Article  >  Web Front-end  >  Real-time display of image loading progress_javascript skills

Real-time display of image loading progress_javascript skills

PHP中文网
PHP中文网Original
2016-05-16 19:27:361454browse

<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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detect user keystrokes_javascript skillsNext article：Detect user keystrokes_javascript skills

Related articles

See more