问题:通过循环创建图片,并在每个图片加载完成之后执行函数,不过每次都是触发最后一个图片的 onload 事件。
代码:
var src=[
"http://www.w3school.com.cn/i/site_photoref.jpg",
"http://www.w3school.com.cn/i/site_photoexa.jpg",
"http://www.w3school.com.cn/i/site_photoqe.jpg"
]
for(var i=0;i<3;i++){
var img=new Image();
img.src=src[i];
img.onload=function(){
console.log(img)
}
}
执行结果是:

我的需求是获得每个图片加载完成之后执行相应的函数,有没有什么好的解决办法?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你这是因为全局变量泄露的原因。
最简单的就是用es6的把var改成let。
或者
好说。var改let即可。es5没有块级作用域只有函数作用域。典型的作用域问题
改var为let,蛋是有个问题。。图片加载是非常非常快的。。特别是在本地时,你看到的结果还是会是一瞬间输出了3条。。你要一条一条看只能这样了:
js里的事件是异步的,而js异步的最大特点就是得等主线程跑完了才轮的到它执行……在这段程序里,
onload只是注册了个事件回调,主程序for还没跑完,它根本没机会切入Event Loop执行事件回调……而等for跑完了,img就一个,所以三遍console.log才打的是一个东西。而要
console.log出三个,一个思路是不要用for,直接用onload驱动就行了。比如我简单写了个递归:这应该算是执行顺序和执行栈的问题,当执行onload事件时,主线程中的for循环已经执行完了。其实不光是onload事件,任何DOM事件都会是这种情况