圖片加載進(jìn)度實時顯示
<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="/articleimg/2006/08/3859/01.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;//無論圖片是否加載成功,都執(zhí)行指定方法
}
</script>
</body>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解
小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個程序與服務(wù)端交互的完整鏈路,但需要大量的定制化代碼,才能實現(xiàn)請求攔截和響應(yīng)攔截,不太符合大多數(shù)開發(fā)者的使用習(xí)慣,對于前端開發(fā)者來說,網(wǎng)絡(luò)層還得是axios2023-02-02JavaScript+html5 canvas繪制的圓弧蕩秋千效果完整實例
這篇文章主要介紹了JavaScript+html5 canvas繪制的圓弧蕩秋千效果,以完整實例形式分析了JavaScript集合html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01使用JS+XML(數(shù)據(jù)島)實現(xiàn)分頁)
使用JS+XML(數(shù)據(jù)島)實現(xiàn)分頁)...2007-01-01理解JavaScript中的適配器模式Adapter?Pattern
這篇文章主要介紹了理解JavaScript中的適配器模式,適配器模式即Adapter?Pattern,是作為兩個不兼容的接口之間的橋梁。這種類型的設(shè)計模式屬于結(jié)構(gòu)型模式,下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-04-04網(wǎng)上應(yīng)用的一個不錯common.js腳本
網(wǎng)上應(yīng)用的一個不錯common.js腳本...2007-08-08javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實例
如果想實現(xiàn)頁面的一些函數(shù)的定時執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08