Attente de chargement d'images dans un <canvas>

Bonjour à tous!

Je suis en train de concevoir une petite appli HTML5.
Je cherche à ne débuter l'affichage que lorsque que toutes mes images seront chargées, par mesure de sécurité.
Comment puis-je effectuer un tel test?

j'espère qu'il ne s'agit pas d'un doublon, mais je n'ai pas trouvé la répons en cherchant.
Merci en tout cas de votre aide.

J'ai une idée...
Je charge mes images, et à chaque "onload" de mes images, j'incrémente une valeur...
Et j'ai une boucle while qui check si ma valeur vaut bien le nombre d'image à charger avant de continuer.
C'est bourrin, mais vous en dites quoi?

Bonjour,

Ce n'est pas évident de savoir quand les images sont chargés sur la page.

Un début de réponse serait de déterminer le nombre d'image présente sur ta page.

nbImg = $("img").length

Ensuite une variable "globale" à la page pourrait être un index qui compte le nombre d'éléments chargé :

 var nbImgLoaded = 0 

Enfin lorsque la document est prêt on pourrait faire

$("img").load(function(){
     nbImgLoaded++;
     if(nbImgLoaded === nbImg){
            alert("Les images sont chargés");
     }
});

La dernière solution est celle à appliquer, surtout ne pas passer une boucle while, tu feras planter ton navigateur et c'est totalement inutile.

Merci!

ca marche à merveille