Discussion :

[seurjer]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);}; 		  					
 }

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width = 0;
height = 0;

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[seurjer]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[seurjer]

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

[SpaceFrog]

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 ...

[seurjer]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[SpaceFrog]

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

[seurjer]

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.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[seurjer]

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

Concernant le mauvais fonctionement de ma fonction, je l'avais écrite avec une majuscule (onLoad) . 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!