Question

i would like to load 3 images in a canvas. I’m using jquery mobile since the site i’m building is for ipad so i cannot use $(‘document’).ready() nor window.onload.
My code is as follow:

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

});

I think i need to bind the image loading to the page create event but images are not getting loaded. I cannot see anything in the canvas.
How can i make them load?

Answer 1

Make a function that fires when any of them load. It will fire 4 times, so they will each appear on screen as they load.

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

live example:

http://jsfiddle.net/ChuRn/