javascript - 延迟功能直到 Assets 加载？

Question

我正在玩 Canvas ，它似乎在 FF6 中运行良好，但在 Chrome 13 中，我正在绘制的 Sprite 显示不可靠。我做了some research并发现问题源于 Assets 完全加载之前触发的函数。

在这里 fiddle : http://jsfiddle.net/LqHY9/

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

(别担心，我的上下文变量已经定义了，我只是删掉了那部分，你可以在 JSFiddle 中看到整个内容。)

Answer 1

Image 对象有一个 onload 事件，您应该 Hook 它。

假设您有多个图像，您可以实现一种“加载程序”。这基本上只是获取一组图像 URL，加载它们中的每一个，并监听它们的 onload 事件。每张图片加载完成后，它会依次调用其他函数，这将发出每个资源已完成加载的信号。