資産がロードされるまで遅延機能？

Question

私はキャンバスで遊んでいますが、FF6でうまくいっているようですが、Chrome 13では、私が描いているスプライトは確実に現れません。 some researchを実行しましたが、この問題はアセットが完全にロードされる前に関数の起動に起因することがわかりました。ここ

フィドル： 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) 

（心配しないでください、私のコンテキスト変数が定義されて、私はちょうどその少し切り取る、あなたが見ることができます

Answer 1

Imageオブジェクトには、フックする必要があるonloadイベントがあります。

イメージが複数あると仮定すると、「ローダー」のような種類を実装できます。これは、基本的には画像URLの配列を取り、それぞれのURLをロードし、それらのonloadイベントを待ち受けます。それぞれのイメージがロードされると、他の関数が呼び出され、すべてのリソースのロードが完了したことが通知されます。

Answer 2

Image（）オブジェクトにはonload（およびonerror）イベントがあります。ロード後に何かを実行する必要がある場合は、関数をアタッチすることができます。

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

srcを設定する前に必ずonloadを添付してください。

Answer 3

画像にonloadハンドラを使用する必要があります。オブジェクトに.srcを設定する前にハンドラを設定する必要があります。ブラウザによっては、画像がブラウザのキャッシュにある場合、.srcを設定するとすぐにロードイベントが発生する場合があるためです。ここでは、擬似コードの一部です：

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

あなたは、私がここに書いた別の答えから関連するサンプルコードを見ることができます：jQuery: How to check when all images in an array are loaded?が。

Answer 4

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