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