难道不是num大于等于img.length吗?i是图片的位置坐标啊从0开始的,那不是永远都有num>i了
个人觉得也应该用,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呢
i本身就是img的遍历