Javascript 延迟功能，直到资产加载？

我正在玩画布，它在FF6中似乎工作得很好，但在Chrome 13中，我正在绘制的精灵看起来并不可靠。我已经这样做了，并且发现问题源于在资源完全加载之前触发函数

在这里拉小提琴：

相关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)

功能精灵（ipath、sh、sw、ih、iw）{
/*雪碧的基本信息*/
这个.frameWidth=sw；
这个.frameHeight=sh；
框架_行=ih/sh；
框架柱=iw/sw；
num_frames=框架列*框架行；
this.frame=新数组（）；
frameNumber=0；
对于（row=0；row图像对象有一个onload事件，您应该将其挂接到该事件中

假设您有多个映像，您可以实现一种“加载程序”。这基本上只需获取一组映像URL，加载每个URL，并侦听它们的加载事件。一旦加载了每个映像，它将调用其他函数，这将表明每个资源都已完成加载。
映像（）对象有一个onload（和onerror）事件。如果需要在加载后执行某个操作，可以附加一个函数

e、 g

只需确保在设置src之前附加了onload。
您需要对图像使用onload处理程序。必须在为对象设置
.src
之前设置该处理程序，因为在某些浏览器中，如果图像在浏览器缓存中，则在设置
.src
时可能会立即触发加载事件。下面是一段pseudo代码：

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

您可以从我在这里写的另一个答案中看到相关的示例代码：。
函数精灵（URL、速度、方框）
{
var=this，running=false，interval=0，load=false；
that.url=url；
速度=速度；
this.images=新数组（）；
that.box=box |{x:0.0，y:0.0，w:64，h:64}；
对于（var i=0；i
太晚了……哦，好吧……你可以在这里看到onload方法的作用：。我建议先加载图像资源，并在每个加载事件中附加一个加载事件。在每个加载事件中，测试是否加载了所有资源（标志或类似），如果所有资源都已加载，则执行main方法。
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";

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