HTML 5 Toile dessiner l'image sur l'autre image

Question

J'ai deux images que je veux dessiner sur une toile. Le problème est que la première image que je dessine peut prendre plus de temps à charger que la seconde. Comme les images sont dessinées sur l'événement onload, il peut arriver que la première image soit dessinée au-dessus de la deuxième image.

Ce n'est pas ce que je veux, je veux toujours que la deuxième image soit dessinée sur la première image. Des idées?

Answer 1

var imgSrcs = ['url1', 'url2']; // <- put image URLs here 

var imgs = []; 
var loaded = 0; 
var loadCallback = function() { 
    loaded++; 
    if (loaded == imgSrcs.length) { 
     // draw imgs in correct order 
    } 
}; 

for (var i = 0; i < imgSrcs.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].addEventListener('load', loadCallback, false); 
    imgs[i].src = imgSrcs[i]; 
}