valeurs différentes avec .offsetWidth

Bonjour,

Je suis en train de devenir :aie: à cause d'une fonction js.
J'initialise la variable width avec

Code:

---

width = myPicture.offsetWidth;

---

et quand je "log" la valeur se trouvant dans width et en direct avec l'alerte du fond, j'obtiens 2 valeurs différentes.

Sérieusement, là je sèche. Je ne comprends pas mon erreure.
Si quelqu'un avait un petit instant pour regarder, ça serait sympa.

Merci d'avance.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function ChargeImage(NumImage) { width = 0; height = 0;   var myPicture = document.images[2]; myPicture.src = "./images/img" + (NumImage) +".jpg";   width = myPicture.offsetWidth; height = myPicture.offsetHeight;   var posX = (parseInt(leftMargin) - (parseInt(width) / 2 )); var posY = (parseInt(topMargin) - (parseInt(height) / 2 ));   maDiv = document.getElementById('picture'); // Warning!! Position "Y X" maDiv.style.padding = ""+posY+"px "+posX+"px"; maDiv.onclick = function(){alert('click ! image en cours: '+myPicture.src+'->'+width+'X'+height+'VS'+myPicture.offsetWidth+'X'+myPicture.offsetHeight);}; }

---

déja les deux première lignes de la focntion !

Code:

---

1 2	width = 0; height = 0;

---

ne jamais utiliser des mots réservés !!

Code:

---

1 2	mywidth = 0; myheight = 0;

---

ensuite pour ce qui est des différences obtenus, tu modifies le padding ...

renseignes toi sur le boxtype ...http://www.w3.org/TR/CSS2/box.html#box-dimensions
le padding s'ajoute dans les dimensions offset ...

Merci beaucoup pour ta réponse.
En effet, j'ai complètement zappé les conventions, c'est corrigé.
Cependant, je ne pense pas que le problème vienne du padding.

Je m'explique:
L'objectif de cette fonction est de faire défiler une image après chaque clic sur un bouton.
D'après ce que j'ai remarqué, seulement quelque fois, le

Code:

---

myWidth = myPicture.offsetWidth;

---

garde les dimensions de l'image précédente.
C'est pour cette raison que j'ai initialiser les variable myWidth et myHeight à zéro.

Si je simplifie ma fonction de la façon suivante, je me retrouve avec 2 taille différentes. Malgré la réinitialisation des 2 valiables de taille.
C'est vraiment un comportement étrange.
Voici l'alert qui s'affiche:

Citation:

---

http://localhost/site/images/img2.jpg -> 478X246 VS 324X432

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

function ChargeImage(NumImage) { myWidth = 0; myHeight = 0;   var myPicture = document.images[2]; myPicture.src = "./images/img" + (NumImage) +".jpg";   myWidth = myPicture.offsetWidth; myHeight = myPicture.offsetHeight;   maDiv = document.getElementById('picture'); maDiv.onclick = function(){alert('click ! image en cours: '+myPicture.src+' -> '+myWidth+'X'+myHeight+' VS '+myPicture.offsetWidth+'X'+myPicture.offsetHeight);};

---

As-tu une autre idée? Peut être un problème de cache du navigateur?

si c'est le cache tu le saura en essayant:

Code:

---

1 2	var myPicture = document.images[2]; myPicture.src = "./images/img" + (NumImage) +".jpg?ts="+new Date().getMilliseconds();

---

J'ai fais quelques essais et le temps varie beaucoup entre min 7 et max 723.
Trouves-tu cela représentatif?

peu importe le temps ... il s'agit de contourner le cache et forcer le rechargement de l'image depuis le serveur ...

autre point qui peut jouer: le temps de chargement de l'image ...

Citation:

---

peu importe le temps ... il s'agit de contourner le cache et forcer le rechargement de l'image depuis le serveur ...

---

Ok, donc ce n'est pas un problème de cache, car le problème persiste.

La plus grande image que j'ai pour faire mes test fait environ 80kb. C'est minuscule.

Est-ce que cela peut venir de mon appel de fonction?
J'affiche l'image comme ceci:

Code:

---

1 2 3 4 5 6 7 8

<div id="picture"> <a href="images/img3.jpg" rel="lightbox" title="my caption"><img src="" border="0" ></a> </div>   <script language="JavaScript"> ChargeImage(2); </script>

---

Et sur les boutons "précédent", "suivant", j'appel les deux fonctions ci-après:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function ImagePrecedente(){ ImageEnCours--; if (ImageEnCours < 2){ ImageEnCours = max-1; } ChargeImage(ImageEnCours); }   function ImageSuivante(){ ImageEnCours++; if (ImageEnCours > max-1 ){ ImageEnCours = 2; } ChargeImage(ImageEnCours); }

---

essaye de lancer la fonction sur le onload de l'image ou sur le click d'un bouton ...

Je suis désolé avec mes questions con, mais arrivant du java, je trouve que le javascript, avec son ouverture de conventions, un peu compliqué. Je m'y perd un peu. :roll:

j'essaie de mettre mon initialisation sur le onLoad comme ceci, mais il me retourne deux fois 0

Code:

---

1 2 3 4 5

myPicture.onLoad = function(){ pictureWidth = myPicture.offsetWidth; pictureHeight = myPicture.offsetHeight; };

---

Et pourtant je suis presque sûr que c'est une partie de la solution...

Merci pour les pistes, j'ai trouvé la solution :ccool:

Concernant le mauvais fonctionement de ma fonction, je l'avais écrite avec une majuscule (onLoad) :calim2:. C'est pas top!

Sinon pour ce qui est de la récupération des tailles de l'image précédente au lieu de l'image courant, il suffisait de faire le onload avant le set de la source.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function loadPicture(NumImage) { var posX; var posY; pictureWidth = 0; pictureHeight = 0; var dynamicDiv = document.getElementById('picture');   var myPicture = document.images[2];   myPicture.onload = function(){ pictureWidth = myPicture.offsetWidth; pictureHeight = myPicture.offsetHeight;   posX = (parseInt(leftMargin) - parseInt(pictureWidth/2)); posY = (parseInt(topMargin) - parseInt(parseInt(pictureHeight)/2)); // Warning!! Position "Y X" dynamicDiv.style.padding = ""+posY+"px "+posX+"px"; };   myPicture.src = "./images/img" + (NumImage) +".jpg"; }

---

Merci SpaceFrog!