Javascript 如何将参数传递到图像加载事件？

当我设置图像对象的src时，它将触发一个onload函数。如何向其添加参数

x = 1;
y = 2;
imageObj = new Image();
imageObj.src = ".....";
imageObj.onload = function() {
    context.drawImage(imageObj, x, y);
};
x = 3;
y = 4;

在这里，我想使用在设置图像的src时设置的x和y值（即1和2）。在上面的代码中，当onload函数完成时，x和y可以是3和4

有没有一种方法可以将值传递到onload函数，或者它会自动使用1和2

---

谢谢

制作一个小函数来处理它。局部变量将保持正确的范围

function loadImage( src, x, y) {

    var imageObj = new Image();
    imageObj.src = src;
    imageObj.onload = function() {
        context.drawImage(imageObj, x, y);
    };

}

var x = 1,
    y = 2;

loadImage("foo.png", x, y);
x = 3;
y = 4;

---

您可以使用匿名函数

x = 1;
y = 2;
(function(xValue, yValue){
    imageObj = new Image();
    imageObj.src = ".....";
    imageObj.onload = function() {
        context.drawImage(imageObj, xValue, yValue);
    };
})(x,y);
x = 3;
y = 4;  

---

创建将存储x&y值的私有作用域闭包：

imageObj.onload = (function(x,y){
        return function() {
            context.drawImage(imageObj, x, y);
    };
})(x,y);

---

所有其他答案都是某种版本的“结束”。好的，行了。我认为闭包很酷，支持闭包的语言也很酷

但是，我认为有一种更简洁的方法可以做到这一点。只需使用image对象存储您需要的内容，并通过“

this

”在加载处理程序中访问它：

这是一种非常通用的技术，我一直在DOM中的许多对象中使用它。（比如说，当我有四个按钮时，我特别使用它，我希望它们都共享一个“onclick”处理程序；我让处理程序从按钮中提取一些自定义数据来执行该按钮的特定操作。）

一个警告：您必须小心不要使用对象类本身具有特殊含义或用途的对象属性。（例如：您不能将

imageObj.src

用于任何旧的自定义用途；您必须将其留给源URL。）但是，在一般情况下，您如何知道给定对象如何使用其所有属性？严格地说，你不能。因此，为了使该方法尽可能安全：

• 将所有自定义数据包装到单个对象中
• 将该对象指定给对象本身不常见/不太可能使用的属性

在这方面，使用“x”和“y”有点冒险，因为某些浏览器中的某些Javascript实现在处理图像对象时可能会使用这些属性。但这可能是安全的：

imageObj = new Image();
imageObj.myCustomData = {x: 1, y: 2};
imageObj.onload = function() {
    context.drawImage(this, this.myCustomData.x, this.myCustomData.y);
};
imageObj.src = ".....";

这种方法的另一个优点是：如果要创建大量给定对象，它可以节省大量内存——因为现在可以共享onload处理程序的单个实例。考虑这一点，使用闭包：

// closure based solution -- creates 1000 anonymous functions for "onload"
for (var i=0; i<1000; i++) {
   var imageObj = new Image();
   var x = i*20;
   var y = i*10;
   imageObj.onload = function() {
       context.drawImage(imageObj, x, y);
   };
   imageObj.src = ".....";
}

//基于闭包的解决方案--为“onload”创建1000个匿名函数
对于（var i=0；i另一种方式：imageObj.coords={x:x，y:y}；…drawImage（imageObj，imageObj.coords.x，imageObj.coords.y）；COMP-SCI-TECHIE-STUFF：上面的问题是onload函数引用了全局变量x和y…并且在执行时将使用当时的当前值。要正确使用闭包，请使用变量值从创建时（闭包的）开始“保存”并在执行时使用——您需要使用
var
声明在闭包中给它们一个作用域。（如果变量是函数的形式参数，则会隐式发生这种情况，这就是基于闭包的答案在此处“起作用”的原因。）哇。令人惊讶的是，我有多少年没有考虑对象解决方案。这是可爱的Dan，thxcool！我没有使用
imageObj.myCustomData
，而是使用
imageObj.this=this
，然后使用
this.this
调用。这比硬编码字段要容易得多，实际上把
this=this.this；
放在
onload
函数中，所以可以使用ths.x调用
ths.x
// closure based solution -- creates 1000 anonymous functions for "onload"
for (var i=0; i<1000; i++) {
   var imageObj = new Image();
   var x = i*20;
   var y = i*10;
   imageObj.onload = function() {
       context.drawImage(imageObj, x, y);
   };
   imageObj.src = ".....";
}

// custom data in the object -- creates A SINGLE "onload" function
function myImageOnload () {
   context.drawImage(this, this.myCustomData.x, this.myCustomData.y);
}
for (var i=0; i<1000; i++) {
   imageObj = new Image();
   imageObj.myCustomData = {x: i*20, y: i*10};
   imageObj.onload = myImageOnload;
   imageObj.src = ".....";
}