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