javascript - 如何将参数传递给图像加载事件？

Question

当我设置图像对象的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？

谢谢

Answer 1

所有其他答案都是“关闭”的某种版本。好的，这有效。我认为闭包很酷，支持它们的语言也很酷......

但是:在我看来，有一种更简洁的方法可以做到这一点。只需使用图像对象来存储您需要的内容，并通过“this”在加载处理程序中访问它:

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

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

一个警告:你必须小心，不要使用对象类本身具有特殊含义或用途的对象属性。 (例如:您不能将 imageObj.src 用于任何旧的自定义用途；您必须将其保留为源 URL。)但是，在一般情况下，您如何知道给定对象使用其所有属性？严格来说，你不能。因此，为了使这种方法尽可能安全:

• 将所有自定义数据封装在一个对象中
• 将该对象分配给该对象本身不常见/不太可能使用的属性。

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

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 = ".....";
}

与共享加载函数相比，您的自定义数据隐藏在 Image 对象中:

// 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 = ".....";
}

节省了大量内存，并且运行速度可能更快，因为您没有创建所有这些匿名函数。 (在这个例子中，onload 函数是一个单行函数......但我有 100 行 onload 函数，其中 1000 个肯定会被认为无缘无故地消耗了大量内存。)

更新:参见use of 'data-*' attribute寻求标准(和“已批准的标准”)方法来执行此操作，而不是我使用 myCustomData 的临时建议。