jquery mobileでキャンバスに画像を描く

Question

キャンバスに3枚の画像を読み込みたいと思います。私は構築しているサイトはipad用ですので、$（ 'document'）。ready（）もwindow.onloadも使用できませんので、jquery mobileを使用しています。 私のコードは次の通りです：

$('#pageId').live('pagecreate', function() { 
var contextE = document.getElementById('gauge-e').getContext('2d'); 
var background = new Image(); 
background.src = gaugeImagePath + "bg.png"; 
var green = new Image(); 
green.src = gaugeImagePath + "green.png"; 
var grey = new Image(); 
greye.src = gaugeImagePath + "grey.png"; 
foreground = new Image(); 
foreground.src = gaugeImagePath + "fg.png"; 

contextE.drawImage(background, 0, 0); 
contextE.drawImage(green, 0, 0); 
contextE.drawImage(grey, 0, 0); 
contextE.drawImage(foreground, 0, 0); 

}）;

私は画像のロードをページ作成イベントにバインドする必要があると思うが、画像はロードされない。私はキャンバスで何も見ることができません。 どうすればロードできますか？

Answer 1

ロード時に起動する関数を作成します。それは4回発射するので、ロードされるたびに画面に表示されます。

gaugeEBackground.onload = hasLoaded; 
gaugeGreenENeedle.onload = hasLoaded; 
gaugeGreyENeedle.onload = hasLoaded; 
gaugeEForeground.onload = hasLoaded; 

function hasLoaded() { 
    // draw whatever ones have loaded so far: 
    contextE.drawImage(gaugeEBackground, 0, 0); 
    contextE.drawImage(gaugeGreenENeedle, 0, 0); 
    contextE.drawImage(gaugeGreyENeedle, 0, 0); 
    contextE.drawImage(gaugeEForeground, 0, 0);  
} 

ライブ例：これは正しいです

http://jsfiddle.net/ChuRn/