Delay function until an asset has loaded?

I am playing with the canvas, and it seems to be working great in FF6, but in Chrome 13, the sprite that I am drawing does not appear reliably. I have done some research and found that the problem stems from the function firing before the asset has loaded completely.

Fiddle here: http://jsfiddle.net/LqHY9/

Relevant Javascript:

    function sprite(ipath, sh, sw, ih, iw){
    /* BASIC INFO FOR SPRITE */
        this.frameWidth = sw;
        this.frameHeight= sh;
        frame_rows = ih/sh;
        frame_columns = iw/sw;
        num_frames = frame_columns*frame_rows ;
        this.frame = new开发者_高级运维 Array();
        frameNumber = 0;
        for(row = 0; row<frame_rows; row++){
            for(i=0;i<frame_columns;i++){
                this.frame[frameNumber] = {};
                this.frame[frameNumber].offsetX = this.frameWidth*i;
                this.frame[frameNumber].offsetY = this.frameHeight*row;
                frameNumber++
            }
        }
        this.sheight = sh;
        this.swidth = sw;
        this.raw = new Image();
        this.raw.src = ipath;
    }
    animation=new sprite("http://www.melonjs.org/tutorial/tutorial_final/data/sprite/gripe_run_right.png",64,64,64,512);

context.drawImage(animation.raw, animation.frame[0].offsetX, animation.frame[0].offsetY, animation.frameWidth, animation.frameHeight, 0, 0, animation.frameWidth,animation.frameHeight)

(Don't worry, my context variable is defined, I just cut that bit out, you can see the whole thing in the JSFiddle.)

The Image object has an onload event which you should hook into.

Assuming you have more than one image, you could implement a sort of a "loader". This would basically just take an array of image URLs, load each of them, and listen to their onload events. Once each image has loaded, it would in turn call some other function, which would signal that every resource has finished loading.

the Image() object has an onload(and onerror) event. If you need to execute something after it loads you can attach a function.

e.g.

var img = new Image();
img.onload = function() {
//do something
};

Just make sure you attach the onload before setting the src.

You need to use the onload handler for the image. You must set the handler before you set the .src for the object because in some browsers, the load event may fire immediately upon setting .src if the image is in the browser cache. Here's a piece of pseudo code:

var img = new Image();
img.onload = function () {
    // image is now loaded and ready for handling
    // you can safely start your sprite animation
}
img.src = "xxx";

You can see related sample code from another answer I wrote here: jQuery: How to check when all images in an array are loaded?.

function Sprite(urls, speed, box)
{
    var that = this, running = false, interval = 0, loaded = false;

    that.urls = urls;
    that.speed = speed;
    that.images = new Array();
    that.box = box || { x: 0.0, y: 0.0, w: 64, h: 64 };

    for(var i = 0; i < that.urls.length; ++i)
    {
        that.images[i] = new Image();
        that.images[i].src = that.urls[i];
        that.images[i].id = i;
        var len = that.urls.length;
        that.images[i].onload = function(){ if(parseInt(this.id) === len) { loaded = true; } };
    }
    that.current = 0;

    var Draw = function(ctx)
    {
        if(loaded)
        {
            var curr = that.images[that.current];
            ctx.drawImage(curr, 0.0, 0.0, curr.width, curr.height, that.box.x, that.box.y, that.box.w, that.box.h);
        }  
    };

    that.Run = function(ctx)
    {
        if(!running)
        {
            running = true;
            interval = setInterval(function(){
                Draw(ctx);
                if(that.current < that.urls.length) 
                { 
                    that.current++; 
                } 
                else 
                {
                    that.current = 0;  
                }
            }, that.speed);
        }
    };

    that.Clear = function()
    {
        if(running)
        {
            running = false;
            clearInterval(interval);
        }
    };
}

// Exemple

var test = new Sprite(["image1.png", "image2.png", "image3.png"], 250);
test.Run(myContext);