js图片的异步加载问题

Question

下面代码运行时为什么只能把最后一张图片载入？
这里的onload方法是异步的吗？在循环完成了之后才运行？
var name = names[i]
var img = new image()
var 改成let就好了。

  var images = {
    ball: 'images/block.png',
    block: 'images/block.png',
    paddle: 'images/paddle.png'
  }

//预先载入所有图片
  var names = Object.key(images)
  for( var i = 0; i<images.length; ++i ){
    var name = names[i]
    var path = images[name]
    var img = new image()
    img.src = path
    img.onload = function(){
      //存入g.images中
      g.images[name] = img
        //所有图片载入成功后，调用run
        loads.push(1)
        if( loads.length == images.length  ){
          g.run()
        }
    }
  }

下面这段代码感觉和上面的解决方案很相似,查了下图片预加载，对网上说“onload需要图片的加载完全，没有图片也就没有onload”不是很清楚，这里的图片加载完全什么意思？onload的异步具体是什么情况啊？

for( let i=1; i<=10; ++i ){
    setTimeout( console.log(i),0 )
}

Answer 1

onload 事件在图片加载完成后立即执行，是异步回调

g.images[name] = img

这执行的的时候name已经是最后一个值了

Answer 2

for循环中，等到最后已经循环到最后一张图片；let表示的for循环是一个有效的代码块。

Answer 3

楼上说了

onload 事件在图片加载完成后立即执行，是异步回调

当你for循环结束时，三个图片都没有加载完。

由于你用var定义了name,此时name就是一个全局变量，for循环结束时，name的值为最后一个值。当有图片加载完成时调用onload，g.images[name] = img的name就是最后一个值。

而let是块级作用域中的变量，三个name值不同。