前端面试题 | img.onload

img.onload问题

var resource=['a.png','b.png','c.png','d.png','e.png','f.png'];
for (var i =0; i < resource.length; i++) {
    var img=new Image();
    img.src=resource[i];
    img.onload=function(){
        console.log(i); // 如果img图片成功加载，最后打印6个6
    }
}

解析： js运行的机制是主线程的同步运行时， 将同步代码产生的异步任务推入任务队列中，同步代码执行完毕后再依次执行异步任务。而for循环是同步进行的，img.onload是异步的，每次img.onload没有执行就被下一个onload覆盖了，所以for循环执行完毕后只剩下最后一个异步的onload。