Question

I’m making a webapp, here I load images from the web and show them. I’m using KineticJS.
What I do is I first do a preload, in which I load a “loading” image, which I show until the actual image is loaded and ready to show.

So, here’s my code:

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);
}

Though, something is wrong with my onload function of imageObj. I get the error: Uncaught TypeError: Cannot call method ‘setImage’ of undefined

When I look in my debugger, the “this” in the function is that image object, and not my card… This is not what I expected, neither what I need. How do I fix that?

So what it has to do is, first make a Kinetic Image with my loadingImage. Then when the actual image is loaded, change the image to that new image.

Thanks!
-Pablo

Answer 1

Assign a custom variable to this and then use that custom variable or use 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);
    }