Delay function until an asset has loaded?

Question

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.)

was too late... oh well... you can see the onload method in action here: http://jsfiddle.net/6QRtY/. I would suggest loading your image resources first and with each one attach a load event. In each load event, test to see if all resources are loaded (flag or similar), and if all resources have loaded, execute the main method. — Joseph Marikle, Sep 16 '11 at 19:20

score 1 · Accepted Answer · answered Sep 16 '11 at 19:17

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.

score 1 · Answer 2 · answered Sep 16 '11 at 19:17

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.

score 1 · Answer 3 · edited May 23 '17 at 12:34

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?.

score 0 · Answer 4 · answered Aug 25 '14 at 09:33

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

Delay function until an asset has loaded?

4 Answers4