如何将参数传递到图像加载事件？ [英] How to pass parameters into image load event?

问题描述

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

When I set the src of an image object, it will trigger an onload function. How can I add parameters to it?

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

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

In here, I want to use the x and y values that were set at the time I set the src of the image (i.e. 1 and 2). In the code above, by the time the onload function would finish, x and y could be 3 and 4.

有没有办法可以将值传递给onload函数，还是会自动使用1和2？

Is there a way I can pass values into the onload function, or will it automatically use 1, and 2?

谢谢

推荐答案

所有其他答案都是make a closure的某个版本。好的，那很有效。我认为闭包很酷，支持它们的语言很酷......

All the other answers are some version of "make a closure". OK, that works. I think closures are cool, and languages that support them are cool...

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

However: there is a much cleaner way to do this, IMO. Simply use the image object to store what you need, and access it in the load handler via "this":

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

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

This is a very general technique, and I use it all the time in many objects in the DOM. (I especially use it when I have, say, four buttons and I want them to all share an "onclick" handler; I have the handler pull a bit of custom data out of the button to do THAT button's particular action.)

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

One warning: you have to be careful not to use a property of the object that the object class itself has a special meaning or use. (For example: you can't use imageObj.src for any old custom use; you have to leave it for the source URL.) But, in the general case, how are you to know how a given object uses all its properties? Strictly speaking, you can't. So to make this approach as safe as possible:

• 在一个对象中包装所有自定义数据


• 将该对象分配给对象本身不常/不可能使用的属性。

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

In that regard, using "x" and "y" are a little risky as some Javascript implementation in some browser may use those properties when dealing with the Image object. But this is probably safe:

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

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

Another advantage to this approach: it can save a lot of memory if you are creating a lot of a given object -- because you can now share a single instance of the onload handler. Consider this, using closures:

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

与shared-onload函数比较，您的自定义数据隐藏在图像中对象：

Compare to shared-onload function, with your custom data tucked away in the Image object:

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

保存了大量内存，因为你没有全部创建，所以可以更快地运行skosh那些匿名的功能。 （在这个例子中，onload函数是单行的....但是我有100行的onload函数，并且肯定会考虑其中1000个没有充分理由花费大量内存。）

Much memory saved and may run a skosh faster since you aren't creating all those anonymous functions. (In this example, the onload function is a one-liner.... but I've had 100-line onload functions, and a 1000 of them would surely be considered spending a lot of memory for no good reason.)

这篇关于如何将参数传递到图像加载事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！