                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /常用的网页加载进度条

难道不是num大于等于img.length吗？i是图片的位置坐标啊从0开始的，那不是永远都有num>i了

慕村4009116

2017-07-22

源自：常用的网页加载进度条 4-1

关注问题我要回答

1137

操作

收起

5 回答

深山小童
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()

0 回复有任何疑惑可以回复我~

收起回答

慕粉3761129
2017-12-02

闭包了，里面if没有定义i，实际上是用外面的i，所以i一直存在。当你触发onchang的时候，i早就加到满了，所以判断其实就是num==图片总数

1 回复有任何疑惑可以回复我~

收起回答

深山小童

正因为闭包了，onload函数中获取到的不是最后一个i的值，而是对应的i值。如同for(var i=0; i<imgs.length; i++){ (function(){ imgs[i].onclick=function(){alert(i);})(i)}

2018-07-30 回复有任何疑惑可以回复我~

Faxine
2017-08-08

$(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勾选。这样打开就能更清楚看到进度了。。。

1 回复有任何疑惑可以回复我~

收起回答