您当前位置：首页 > web前端 > jscript > JavaScript打造加载图片时显示进度条效果

JavaScript打造加载图片时显示进度条效果

来源：程序员人生发布时间：2013-11-14 11:22:36 阅读次数：3103次

　　网(LieHuo.Net)教程图片加载的JavaScript适时进度条显示代码，图片Loading效果，大家都知道的，这一个可能从0%一直显示到100%，然后加载图片显示出来，测试时候为了看清楚效果，你可以多加载一些图片，张数太少的话，进度会一闪而过，什么也看不到。

<title>图片进度条 - LIEHUO.NET</title><script>var l=0;var imgs;var sum=0;function chk(){ document.getElementById("liehuo_net").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="http://www.wfuyu.com/uploads/allimg/090926/0TH54939-5.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090926/0TH54939-5.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/090930/1_090930171900_1.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090930/1_090930171900_1.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/091003/1_091003221040_1.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/091003/1_091003221040_1.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/090920/1124135M6-0.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090920/1124135M6-0.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/090923/1F1352395-2.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090923/1F1352395-2.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/091001/10002Q3a-7.jpg" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/091001/10002Q3a-7.jpg"/><img src="http://www.wfuyu.com/uploads/allimg/090923/153SaT8-1.png" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090923/153SaT8-1.png"/><img src="http://www.wfuyu.com/uploads/allimg/090928/1249332R8-0.gif" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/090928/1249332R8-0.gif"/><img src="http://www.wfuyu.com/uploads/allimg/091001/222431N52-1.JPG" _fcksavedurl="http://www.wfuyu.com/uploads/allimg/091001/222431N52-1.JPG"/><div id="liehuo_net"></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></body><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 JavaScript 移动焦点放大图片局部效果代码

下一篇 Javascript中定义类(class)的几种方法总结

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点