Нарисуйте изображение на холсте с помощью jquery mobile

Question

Я хотел бы загрузить 3 изображения на холсте.Я использую jquery mobile, так как сайт, который я создаю, предназначен для ipad, поэтому я не могу использовать $ ('document'). Ready () или window.onload.Мой код выглядит следующим образом:

$('#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/