[js效果] 图片加载进度实时显示
2013-08-26 08:09
639 查看
<title>[js效果] 图片加载进度实时显示 - 中国asp之家</title> <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="/article/UploadPic/20079/11/2007911194530175.jpg"; imgs[1].src="/article/UploadPic/20079/11/2007911194524979.jpg"; imgs[2].src="/article/UploadPic/20079/11/2007911194532428.jpg"; imgs[3].src="/article/UploadPic/20079/11/2007911194533801.jpg"; imgs[4].src="/article/UploadPic/20079/11/2007911195132205.jpg"; imgs[5].src="/article/UploadPic/20079/11/2007911195133491.jpg"; imgs[6].src="/article/UploadPic/20079/11/2007911194531997.jpg"; imgs[7].src="/article/UploadPic/20079/11/2007911195134500.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>
View Code
相关文章推荐
- js效果 图片加载进度实时显示
- [js效果] 图片加载进度实时显示
- 实时显示图片加载进度
- 图片加载进度实时显示
- 图片加载进度实时显示
- Glide实现加载图片显示进度条效果
- As+lightbox+js实现实时加载图片进度
- 图片加载进度实时显示
- 实现微信和QQ图片加载显示进度的效果-LoadingProgress
- js图片未加载完显示loading效果
- javascript使图片加载进度实时显示
- js实现图片加载淡入淡出效果
- cocos2d-JS 实现 横 竖 屏 显示提示图片(rotate.png)效果 !!!!!
- HTML5+javascript实现图片加载进度动画效果
- 关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- WebView加载网页-进度显示-网络上传图片并压缩
- js图片实时加载提供网页打开速度
- JS图片滤镜 焦点图片自动切换显示效果丨芯晴网页特效
- js鼠标移动在title中显示图片的效果代码