Question

我正在制作一个webapp，在这里我从网上加载图像并显示它们。我正在使用KineticJS。我做的是我先做一个预加载，在其中我加载一个“加载”图像，我显示该图像，直到实际图像加载并准备好显示。

所以，这是我的代码：

function CardObject(cardName)
{
this.name = cardName;

this.tapped = false;

// Create kinetic image with loading image
this.image = new Kinetic.Image({
        x: 10,
        y: 10,
        image: CardLoadingImage,
        width: CardWidth,
        height: CardHeight
    });

// Add actual image, and when loaded change it
this.imageObj = new Image();
this.imageObj.onload = function() //Problem here
{
    this.image.setImage(this.imageObj);
}
this.imageObj.src = "testImage.jpg";

// Add it to the stage
this.layer = new Kinetic.Layer();
this.layer.add(this.image);
Stage.add(this.layer);
}

虽然我的imageObj的onload函数有问题。我收到错误：Uncaught TypeError：无法调用未定义的方法'setImage'

当我查看我的调试器时，函数中的“this”是图像对象，而不是我的卡...这不是我所期望的，也不是我需要的。我该如何解决这个问题？

所以它要做的是，首先使用我的loadingImage制作动态图像。然后，当加载实际图像时，将图像更改为该新图像。

谢谢！ -Pablo

Answer 1

将自定义变量分配给this，然后使用该自定义变量或使用jquery proxy

function CardObject(cardName)
    {
    this.name = cardName;

    this.tapped = false;
    var that = this;//assigning custom variable

    // Create kinetic image with loading image
    this.image = new Kinetic.Image({
            x: 10,
            y: 10,
            image: CardLoadingImage,
            width: CardWidth,
            height: CardHeight
        });

    // Add actual image, and when loaded change it
    this.imageObj = new Image();
    this.imageObj.onload = function() //Problem here
    {
        that.image.setImage(this);//edited
    }
    this.imageObj.src = "testImage.jpg";

    // Add it to the stage
    this.layer = new Kinetic.Layer();
    this.layer.add(this.image);
    Stage.add(this.layer);
    }

父对象的js image.onload调用方法

1 个答案: