您當(dāng)前位置：首頁(yè) > web前端 > jscript > JavaScript打造加載圖片時(shí)顯示進(jìn)度條效果

JavaScript打造加載圖片時(shí)顯示進(jìn)度條效果

來(lái)源：程序員人生發(fā)布時(shí)間：2013-11-14 11:22:36 閱讀次數(shù)：3327次

　　網(wǎng)(LieHuo.Net)教程圖片加載的JavaScript適時(shí)進(jìn)度條顯示代碼，圖片Loading效果，大家都知道的，這一個(gè)可能從0%一直顯示到100%，然后加載圖片顯示出來(lái)，測(cè)試時(shí)候?yàn)榱丝辞宄Ч?，你可以多加載一些圖片，張數(shù)太少的話(huà)，進(jìn)度會(huì)一閃而過(guò)，什么也看不到。

<title>圖片進(jìn)度條 - 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.jyygyx.com/uploads/allimg/090926/0TH54939-5.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090926/0TH54939-5.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/090930/1_090930171900_1.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090930/1_090930171900_1.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/091003/1_091003221040_1.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/091003/1_091003221040_1.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/090920/1124135M6-0.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090920/1124135M6-0.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/090923/1F1352395-2.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090923/1F1352395-2.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/091001/10002Q3a-7.jpg" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/091001/10002Q3a-7.jpg"/><img src="http://www.jyygyx.com/uploads/allimg/090923/153SaT8-1.png" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090923/153SaT8-1.png"/><img src="http://www.jyygyx.com/uploads/allimg/090928/1249332R8-0.gif" _fcksavedurl="http://www.jyygyx.com/uploads/allimg/090928/1249332R8-0.gif"/><img src="http://www.jyygyx.com/uploads/allimg/091001/222431N52-1.JPG" _fcksavedurl="http://www.jyygyx.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;//無(wú)論圖片是否加載成功，都執(zhí)行指定方法 imgs[i].style.display='none';}</script></body><br /><center>網(wǎng)更多教程，請(qǐng)?jiān)L問(wèn)：<a href=http://www.jyygyx.com/ target=_blank _fcksavedurl="http://www.jyygyx.com/ target=_blank">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線(xiàn)----------------------------

上一篇 JavaScript 移動(dòng)焦點(diǎn)放大圖片局部效果代碼

下一篇 Javascript中定義類(lèi)(class)的幾種方法總結(jié)

分享到:

------分隔線(xiàn)----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

JavaScript打造加載圖片時(shí)顯示進(jìn)度條效果