11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [canvas html5/javascript] problème d'affichage d'images

Encore moi Smiley lol

Bon je sais je suis chiant mais je n'y peux rien si je tombe sur des bugs de merde tout le temps Smiley decu , je cherche je cherche j'essaye mais rien n'y fait.

Donc voila j'aimerais réaliser une nouvelle bannière en html5 pour mon site en version mobile. comme j'en ais ras le c** de passer par ftp pour tester sur mon ipod et autre, j'ai voulut tester par safari Windows. (je suis sous xp)
Seulement j'ai décelé un problème d'affichage dans la création de ma bannière. J'ai deux images que je précharge (du moins je pense, j'ai trouvé cette astuce sur le net ) et avant j’affichais directement sans prendre en compte le fait que mes images pouvaient ne pas être chargé en entier. Alors j'ai mis en place un système de lancement du dessin de ma bannière après le chargement de toutes mes images. 


var tableauChargement=[false,false];
var tableauImage=new Array();

var I0=new Image();
I0.src="plop.png";
I0.onload=finDeChargement(0);

var I1=new Image();
I1.src="plop2.png";
I1.onload=finDeChargement(1);



function finDeChargement(num){
	tableauChargement[num]=true;
	if(num==0)
		tableauImage[num]=I0;
	else{
		tableauImage[num]=I1;
	}
	if(tableauChargement[Math.abs(num-1)]){
		banniere();
	}
}


Et dans ma fonction bannière j'ai le traditionnel imageDraw();

Le code marche nickel sur firefox. Mais sur safari niette :'( je suis dépité et énervé car je ne sais pas comment amélioré le chargement de mes images pour qu'elles apparaissent sur mon canvas a chaque fois.

(Oui car une fois sur mille elles apparaissent sur safari Smiley lol une fois sur mille quoi Smiley decu )

Merci de votre aide.
Salut,

Si à la fin du script tu ajoute alert([I0.onload, I0.onload]), tu aurai remarquer que les valeurs sont undefined.
Ce que tu as donné à onload n'est pas une fonction mais le retour d'une fonction.


I0.onload=function(){finDeChargement(0);};
//...
I1.onload=function(){finDeChargement(1);};
Pourtant il se passe bien quelque chose vu que des formes rectangulaire (issue d'une partie de ma bannière) s'affichent. Seul les photos n'apparaissent pas ? Cela a-t-il donc vraiment un lien ?

Ou alors cela implique-t-il que pour charger la page, le onload n'attend que la fin de la fonction et pas la fin du chargement des images de la fonction ? et que du coup passer par ton code force le onload a attendre la fin du chargement des images ?
jo_link_noir a raison. Appeler une fonction avec les parenthèses () fait s'exécuter le corps de la fonction directement. Ce que tu assignes à la propriété "onload" de ton objet Image c'est la valeur de retour de la fonction "finDeChargement", soit avec 0, soit avec 1 en paramètre. Etant donné que ta fonction ne retourne rien, la valeur de onload est "undefined". Les fonctions ne sont donc pas exécutées quand les images ont fini de charger.

Si les images ne s'affichent toujours pas avec le code de jo_link_noir, tu peux aussi vérifier que le chemin vers tes images existe bien (un coup de Google Chrome inspection ou Firebug devrait faire l'affaire, onglet "Network")

Tu peux aussi assigner une fonction a onerror pour voir si une erreur se produit et débugger, genre 
I0.onerror=function(errorMsg, url, lineNumber) { console.log(errorMsg); }
(pas sur des paramètres, je te laisse tester)
Sujet clos
Aller à