課程
/前端開發(fā)
/JavaScript
/常用的網(wǎng)頁(yè)加載進(jìn)度條
難道不是num大于等于img.length嗎?i是圖片的位置坐標(biāo)啊從0開始的,那不是永遠(yuǎn)都有num>i了
2017-07-22
源自:常用的網(wǎng)頁(yè)加載進(jìn)度條 4-1
正在回答
個(gè)人覺(jué)得也應(yīng)該用,num>=img.size()判斷,我們很容易認(rèn)為每次判斷時(shí)num總比i大1,因?yàn)閚um已經(jīng)遞增,而i是從0開始的,而實(shí)際上num是在oImg加載完畢時(shí)進(jìn)行遞增的,每張圖片并不是按順序加載完畢的,可能后面的圖片先于前面的圖片觸發(fā)onload函數(shù),因此num并不總是大于i的,大于等于小于都有可能(這里需要注意的是由于形成了閉包,里面i的值是對(duì)應(yīng)的下標(biāo))。
用num和i判斷,則很有可能圖片并沒(méi)有加載完畢,而之所以我們確實(shí)看到了數(shù)字變?yōu)?00%,這是因?yàn)閳D片加載的很快,且fadeOut()淡出有一個(gè)很短的過(guò)渡時(shí)間,我們可以引入一張國(guó)外幾乎加載不了的圖片進(jìn)來(lái),可以發(fā)現(xiàn),雖然loading遮罩層已經(jīng)消失,但這張圖片根本沒(méi)有加載進(jìn)來(lái)。如果使用img.size()來(lái)判斷,則可以明顯的看到幾乎不動(dòng)的進(jìn)度百分比。
可以在num++后,和if語(yǔ)句中,console.log()控制臺(tái)打印出num和i來(lái)查看變化,可以明顯看到if(num>=i)會(huì)觸發(fā)很多次fadeOut()
閉包了,里面if沒(méi)有定義i,實(shí)際上是用外面的i,所以i一直存在。當(dāng)你觸發(fā)onchang的時(shí)候,i早就加到滿了,所以判斷其實(shí)就是num==圖片總數(shù)
深山小童
$(function(){ var?img?=?$('img'); var?nums?=?img.length; var?start?=?0; img.each(function(i){ var?oImg?=?new?Image(); oImg.onload?=?function(){ oImg.onload?=?null; start++; console.log(start); $('.loading?b').html(parseInt(star/$('img').size()*100)+'%') if(start?==?nums){ $('.loading').fadeOut(); } } oImg.src?=?img[i].src; }) })
老師的應(yīng)該有點(diǎn)問(wèn)題,我跟著老師寫判斷那塊:if(star == i) 的話這塊不可能為ture. 打印i出來(lái):0,1,2,3,4
start打印出來(lái) 1,2,3,4,5 。這等不到一起啊…
所以就改了判斷的那塊。
測(cè)試過(guò)了沒(méi)有問(wèn)題。測(cè)試的時(shí)候記得把控制臺(tái)的 disable cache勾選。這樣打開就能更清楚看到進(jìn)度了。。。
同問(wèn)不 I是從0開始遍歷 num初始值也是0。這句if一直都是true的 為什么要加if呢
Faxine
i本身就是img的遍歷
慕村4009116 提問(wèn)者
舉報(bào)
通過(guò)課程,讓你學(xué)習(xí)到網(wǎng)頁(yè)中常見的進(jìn)度加載的實(shí)現(xiàn)方式.
2 回答num不是一直是大于i的嗎
1 回答代碼邏輯(if num>=i)有問(wèn)題?
1 回答判斷為什么要用num>=i,感覺(jué)不對(duì)呀
1 回答我想請(qǐng)問(wèn)下各位大神如果不是用圖片的怎么辦
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-07-30
個(gè)人覺(jué)得也應(yīng)該用,num>=img.size()判斷,我們很容易認(rèn)為每次判斷時(shí)num總比i大1,因?yàn)閚um已經(jīng)遞增,而i是從0開始的,而實(shí)際上num是在oImg加載完畢時(shí)進(jìn)行遞增的,每張圖片并不是按順序加載完畢的,可能后面的圖片先于前面的圖片觸發(fā)onload函數(shù),因此num并不總是大于i的,大于等于小于都有可能(這里需要注意的是由于形成了閉包,里面i的值是對(duì)應(yīng)的下標(biāo))。
用num和i判斷,則很有可能圖片并沒(méi)有加載完畢,而之所以我們確實(shí)看到了數(shù)字變?yōu)?00%,這是因?yàn)閳D片加載的很快,且fadeOut()淡出有一個(gè)很短的過(guò)渡時(shí)間,我們可以引入一張國(guó)外幾乎加載不了的圖片進(jìn)來(lái),可以發(fā)現(xiàn),雖然loading遮罩層已經(jīng)消失,但這張圖片根本沒(méi)有加載進(jìn)來(lái)。如果使用img.size()來(lái)判斷,則可以明顯的看到幾乎不動(dòng)的進(jìn)度百分比。
可以在num++后,和if語(yǔ)句中,console.log()控制臺(tái)打印出num和i來(lái)查看變化,可以明顯看到if(num>=i)會(huì)觸發(fā)很多次fadeOut()
2017-12-02
閉包了,里面if沒(méi)有定義i,實(shí)際上是用外面的i,所以i一直存在。當(dāng)你觸發(fā)onchang的時(shí)候,i早就加到滿了,所以判斷其實(shí)就是num==圖片總數(shù)
2017-08-08
老師的應(yīng)該有點(diǎn)問(wèn)題,我跟著老師寫判斷那塊:if(star == i) 的話這塊不可能為ture. 打印i出來(lái):0,1,2,3,4
start打印出來(lái) 1,2,3,4,5 。這等不到一起啊…
所以就改了判斷的那塊。
測(cè)試過(guò)了沒(méi)有問(wèn)題。測(cè)試的時(shí)候記得把控制臺(tái)的 disable cache勾選。這樣打開就能更清楚看到進(jìn)度了。。。
2017-07-27
同問(wèn)不 I是從0開始遍歷 num初始值也是0。這句if一直都是true的 為什么要加if呢
2017-07-23
i本身就是img的遍歷