Javascript image.onLoad——在触发此操作之前，我应该如何保持数据可用？ //绘制图标 对于（var i=0；i

在加载图像之前，必须将数据存储为图像的属性，而在“onload”事件期间只能访问这些属性，这似乎违反了直觉。不过，我没能找到另一个选择。我想知道是否有人有什么想法。谢谢。

变量在范围内。问题在于

i

（以及循环中重新分配的任何其他变量）将在事件触发之前发生变化。如果你简单地把代码拉到一个函数中，问题就解决了

//Draw Icon
for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {
        var myImage = new Image();

        myImage.xOffset = diagram.Children[i].Offset.X;
        myImage.yOffset = diagram.Children[i].Offset.Y;
        myImage.componentName = diagram.Children[i].Name;
        myImage.componentLevel = diagram.Level;
        myImage.componentID = diagram.ID;
        myImage.type = diagram.Type;

        myImage.onload = function () {
            var self = this;
            var iconImage = new Kinetic.Image({
                image: self,
                x: self.xOffset,
                y: self.yOffset,
                tooltip: CreateTooltip(self.componentName, self.componentID, self.type),
                componentLevel: self.componentLevel,
                componentID: self.componentID
            });

            _stage.diagramLayer.add(iconImage);
            _stage.diagramLayer.draw();
        }

        //TODO: IE8+ doesn't support data URI's unless they are defined in css. 
        //myImage.src = 'data:image/png;base64,' + diagram.Children[i].Icon;
        myImage.src = '../PlanView/RenderIcon?IconID=' + diagram.Children[i].Icon;
    }
}

还有其他选择，我发现更为混乱，例如返回函数的匿名函数

for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {

        (function(diagram, i){
            var myImage = new Image();

            var xOffset = diagram.Children[i].Offset.X;

            /* etc. */

            myImage.onload = function () {
                // do stuff and use variables such as xOffset here
            }
        })(diagram, i);
    }
}

---

嘿，谢谢你，如果这是最好的答案，我会接受的。是否可以将doImageStuff的参数传递给匿名函数？如果我尝试myImage.onload=function（diagram，I）{}diagram，我就会超出范围。更新我的答案以解决匿名函数的问题。这不能完全像你描述的那样，但是是可能的。我只是觉得把它分开比较干净。这里重要的一点是需要调用匿名函数来“复制”变量。谢谢。我最终选择了你原来的解决方案——它确实更干净。

for (var i = 0; i < diagram.Children.length; i++) {
    if (diagram.Children[i].Icon != -1) {

        (function(diagram, i){
            var myImage = new Image();

            var xOffset = diagram.Children[i].Offset.X;

            /* etc. */

            myImage.onload = function () {
                // do stuff and use variables such as xOffset here
            }
        })(diagram, i);
    }
}

myImage.onload = (function (diagram, i) {
                     return function(){
                         // do stuff here using the variables
                     }
                 })(diagram, i);