11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Chargement de 3 images avant script

Bonjour,
Je code une page php dans laquelle trois images sont utilisées par un script qui génèrent du code modifiant des canvas. Mon problème : je ne parviens pas à faire en sorte que les trois images se chargent avant que le script s'exécute.
Le chargement des images est dans le script, car les pixels sont modifiés avant affichage.
Il y a plusieurs images...
Mes diverses tentatives ne fonctionnent pas...
Est-ce que quelqu'un aurait un schéma général de principe à proposer ? Sinon je mettrai mon code, mais avec un principe général, je pense que je peux m'en sortir...
Merci,
un truc du genre :

var img = new Image();
img.onload = function() {
    // image chargée
};
img.onerror = function() {
    // échec du chargement de l'image
};
img.src = "path/to/image.jpg";
Bonjour,
Au vu de vos réponses, je ne comprend pas pourquoi cela ne marche pas. Voici là où j'en suis (après plusieurs autres tentatives) :

<script type="text/javascript">
var img = new Image();
var img2 = new Image();
var img3 = new Image();
img.src = "tulip.jpg";
img.src = "coquel.jpg";
img3.src = "degrade.png";
var c1 = document.getElementById("canvas1");
var ctx1 = c1.getContext("2d");
var c2 = document.getElementById("canvas2");
var ctx2 = c2.getContext("2d");
var c4 = document.getElementById("canvas4");
var ctx4 = c4.getContext("2d");

etc...
puis : 
function dessin1(){
img.onload = dessin2()
}
			
function dessin2(){
ctx1.drawImage(img, 262, 15);

etc...
puis :
<body onload="dessin1()">
<div id="loading"><br><br>Please wait...</div> 
<canvas id="canvas1" width="1065" height="264">

etc...
Merci à ceux qui prendront le temps de regarder !
img.src est à mettre après img.onload sinon, il y a le risque que ton image soit déjà chargée lorsque tu arrives à la ligne de img.onload et donc ne déclenche pas la fonction puisque l'événement "image chargée" a déjà été déclenché.
Merci,
Effectivement je m'en suis sorti grâce à cette remarque de yiujia.
Par contre, j'avais encore un problème de "img.width=0" juste après le "img.load"...
Du coup, j'ai mis la suite du code dans une fonction déclenchée après 500ms (avec un "timeout"). Et là, tout semble marcher normalement...
Est-ce que c'est connu, que juste après qu'une image soit chargée, le "img.load" se déclenche mais en fait l'image n'est pas totalement utilisable puisque par exemple son paramètre width n'est pas immédiatement disponible ?
Sujet clos
Aller à