Javascript 如何用函数动态绑定变量？

问题：当image.onload事件下载并检测到新图像时，必须动态更改以前加载的图像。比如说，picture1.png下载并立即更改，picture2.png下载并立即更改，等等。我尝试了以下方法，但没有成功：

<script type="text/javascript">
 loadImage = function(){    
     var imgs = new Array();    
     var IMG = document.getElementsByTagName('img');    
     for(var i=1;i<=IMG.length;i++)
     {
       imgs[i] = new Image();
       imgs[i].src = "picture" + i + ".png";
       imgs[i].onload = function(){
         alert('picture'+i+' loaded');
         IMG[i].setAttribute('src',imgs[i].getAttribute('src'));
       }           
     }              
 }    
</script>    
 <img src="sample.png" />
 <img src="sample.png" />
 <img src="sample.png" />
 <img src="sample.png" />
 <input type="button" value="Load Image" onclick="loadImage()"> 

loadImage=函数（）{
var imgs=新数组（）；
var IMG=document.getElementsByTagName（'IMG'）；
对于（var i=1；iUse
closure
as
onload
事件是异步的。
onload
处理程序中
i
的值将是循环的
最大值，因为在调用
时，循环已经被迭代


函数loadImage（）{
var temp=['http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/'];
var IMG=document.getElementsByTagName（'IMG'）；//从DOM获取所有图像标记元素
对于（var i=0；i

您可以使用javascript native“”方法来执行此操作。例如：

var fn = function(index){
     alert('picture'+ index +' loaded');
     this.setAttribute('src',imgs[index].getAttribute('src'));
};
imgs[i].onload = fn.bind(IMG[i], i);

太棒了！但在firefox中，它会以相反的顺序从3到0发出警报。这取决于图像加载所花费的时间。我无法理解你所倾注的魔法！你介意解释一下你的代码吗？因为我对此完全不熟悉。（你所做的嵌套，还有括号等）@RayonIt是可以的。但是，无法获得（函数（i，…）（i，图像）符号。再次感谢。可能会帮助您。。。