为什么'；是否将此Javascript图像对象添加到图像数组中？

我一直在尝试创建一个基于HTML5的小示例，但遇到了一些问题。我想在

上渲染一块石头，但是这个Javascript对象无法正常工作

function ImageData() {
    this.image_names = ["rock1"];
    this.images = new Array();
    this.loadResources = function () {
        for (var i = 0; i < this.image_names.length; i++) {
            var img = new Image();
            img.onload = (function (a) {
                a.images[a.image_names[i]] = img;
                console.log(a.images); //log is successful, image is in array
            })(this);
            img.src = "images/" + this.image_names[i] + ".png";
        }
    }
}

如果您尝试通过控制台访问对象，在确定图像已加载后，您将看到图像数组中没有图像。我不明白为什么它不起作用。我已经看了好几遍了

编辑：这是我的最终工作结果：

function ImageData() {
    this.image_names = ["rock1"];
    this.images = new Array();
    this.loadResources = function (callback) {
        for (var i = 0; i < this.image_names.length; i++) {
            var img = new Image();
            img.onload = (function (a, i) {
                return function() {
                    a.images[a.image_names[i]] = img;
                    if (i == (a.image_names.length - 1)) callback();
                };
            })(this, i);
            img.src = "images/" + this.image_names[i] + ".png";
        }
    }
}

函数ImageData（）{
this.image_name=[“rock1”]；
this.images=新数组（）；
this.loadResources=函数（回调）{
对于（var i=0；i

我冒昧地说，您正在尝试在它添加到阵列之前访问它。我建议您在

loadResources

方法中添加一个回调或其他内容，以确保在您尝试访问它之前它就在那里

this.loadResources = function (callback) {
    for (var i = 0; i < this.image_names.length; i++) {
        var img = new Image();
        img.onload = (function (a, i) {
            return function() {
                a.images[a.image_names[i]] = img;
                console.log(a.images); //log is successful, image is in array
                callback();
            };
        })(this, i);
        img.src = "images/" + this.image_names[i] + ".png";
    }
} 

还有，@Igor提到的。我完全错过了。我调整了上面的代码，这样您就可以保留

这个

范围，而不必在其他地方设置它

---

更新以解决@RobD提出的

i

问题。

我冒昧地说，您正在尝试在将其添加到阵列之前访问它。我建议您在

loadResources

方法中添加一个回调或其他内容，以确保在您尝试访问它之前它就在那里

this.loadResources = function (callback) {
    for (var i = 0; i < this.image_names.length; i++) {
        var img = new Image();
        img.onload = (function (a, i) {
            return function() {
                a.images[a.image_names[i]] = img;
                console.log(a.images); //log is successful, image is in array
                callback();
            };
        })(this, i);
        img.src = "images/" + this.image_names[i] + ".png";
    }
} 

还有，@Igor提到的。我完全错过了。我调整了上面的代码，这样您就可以保留

这个

范围，而不必在其他地方设置它

---

更新以解决@RobD提出的

i

问题。

在

onload

处理程序定义之后删除

（此）

。实际上，您正在立即调用此函数，将

undefined

（因为它不返回任何内容）赋值为

img.onload

值。

在

onload

处理程序定义之后删除

（this）

。实际上，您正在立即调用此函数，将

undefined

（因为它不返回任何内容）赋值为

img.onload

值。

我还没有测试您的代码，但我想这就是问题所在： 您正在尝试在加载图像之前访问它。加载回调事件处理程序后，可以使用它，如下所示：

var data = new ImageData();

data.loadResources(function(imgObj){
 // imgObj is the newly load image here. Have fun with it now!
})

---

我还没有测试您的代码，但我想这就是问题所在： 您正在尝试在加载图像之前访问它。加载回调事件处理程序后，可以使用它，如下所示：

var data = new ImageData();

data.loadResources(function(imgObj){
 // imgObj is the newly load image here. Have fun with it now!
})

在守则中：

> function ImageData() {
>     this.image_names = ["rock1"];
>     this.images = new Array();
>     this.loadResources = function () {
>         for (var i = 0; i < this.image_names.length; i++) {
>             var img = new Image();
>             img.onload = (function (a) {

图像是用作普通对象的数组。那么最好使用普通对象

>                 console.log(a.images); //log is successful, image is in array
>             })(this);

因为生命的原因，这必须被传递进去。移除IIFE，则无需通过该测试。如果在函数中存储了对实例的引用，那么调用函数的方式就无关紧要了（也就是说，您不必在调用中设置它）

您可能需要以下内容：

function ImageData() {
    this.image_names = ['rock1'];
    this.images = {};
    imageData = this;
    this.loadResources = function (callback) {

        for (var i = 0; i < imageData.image_names.length; i++) {
            var img = new Image();
            imageData.images[a.image_names[i]] = img;
            img.src = 'images/' + this.image_names[i] + '.png';

            if (callback) {
                img.onload = callback;
            }
        }
    }
}

var a = new ImageData();
a.loadResources(function(){console.log('loaded: ' + this.src);}); // loaded: …

window.onload = function() {
    document.body.appendChild(a.images.rock1); // image appears in document
}

函数ImageData（）{
this.image_name=['rock1']；
this.images={}；
imageData=此；
this.loadResources=函数（回调）{
对于（var i=0；i

在代码中：

> function ImageData() {
>     this.image_names = ["rock1"];
>     this.images = new Array();
>     this.loadResources = function () {
>         for (var i = 0; i < this.image_names.length; i++) {
>             var img = new Image();
>             img.onload = (function (a) {

图像是用作普通对象的数组。那么最好使用普通对象

>                 console.log(a.images); //log is successful, image is in array
>             })(this);

因为生命的原因，这必须被传递进去。移除IIFE，则无需通过该测试。如果在函数中存储了对实例的引用，那么调用函数的方式就无关紧要了（也就是说，您不必在调用中设置它）

您可能需要以下内容：

function ImageData() {
    this.image_names = ['rock1'];
    this.images = {};
    imageData = this;
    this.loadResources = function (callback) {

        for (var i = 0; i < imageData.image_names.length; i++) {
            var img = new Image();
            imageData.images[a.image_names[i]] = img;
            img.src = 'images/' + this.image_names[i] + '.png';

            if (callback) {
                img.onload = callback;
            }
        }
    }
}

var a = new ImageData();
a.loadResources(function(){console.log('loaded: ' + this.src);}); // loaded: …

window.onload = function() {
    document.body.appendChild(a.images.rock1); // image appears in document
}

函数ImageData（）{
this.image_name=['rock1']；
this.images={}；
imageData=此；
this.loadResources=函数（回调）{
对于（var i=0；i

立即运行分配给onload属性的RHS上的函数，因此分配结果。它不返回任何内容，因此未定义被指定。如果使用非数字键，为什么

图像

是一个数组。在处理即时生成的多个帧中的多个对象时，更容易拉出数组中的图像，无论它们是如何组织的。一个图像被使用了几次。分配给onload属性的RHS上的函数立即运行，因此结果被分配。它不返回任何内容，因此未定义被指定。如果使用非数字键，为什么

图像

是一个数组。在处理即时生成的多个帧中的多个对象时，更容易拉出数组中的图像，无论它们是如何组织的。一张图片被使用了几分钟