Discussion :

[leFred]

Hello

Je fais un retaillage d'image au survol d'un lien, l'image s'affiche en miniature mais en respectant son ratio d'origine, le problème est que pour certaine, de façon très aléatoire et seulement sous IE (evitons le débat Ie/FF ça fera rien avancer ) il semble qu'il n'ai pas le temps de charger l'image (je lui fait pourtant une pause avec un settimeout tant que le width de l'image = 0), avant de faire le calcul, du coup il prend par defaut 0 comme valeur et mon image se retrouve carrée

Sur FF tout va bien, je vois pas trop quelle partie du code vous mettre car c'est généré via php et que le bug est aléatoire, j'ai pas réussi a reproduire une séquence buggante à 100%...d'ou ça peut venir a votre avis, quelque chose dans le fichier image d'origine qui le gène ?

[Bovino]

Essaye de lancer ta fonction sur le onload de l'image.

[leFred]

j'ai fait aussi mais ça n'a rien donné de mieux....

[SpaceFrog]

Peut êtrre tester le complete de l'image avent de lui appliquer la fonction

[Bovino]

j'ai fait aussi mais ça n'a rien donné de mieux....

Dans ce cas, la pratique vaut mieux que la théorie : montre-nous ton code !

[leFred]

Bon...ben on y va alors; pour info avec le complete c'est idem, je vous mets juste ce qui foire :

Le principe : suite a une interrogation de base en php, je crée une page (une ligne par article); sur ces lignes un lien du style ID_8.jpg, au rollover j'appelle la fonction en passant l'id en parametre (soit aImg):

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function positionneVignetteProduct(aImg){
 
	aSrc = 'images/illustrations_bdd/miniatures/ID_'+aImg+'.jpg';
 
	//Attendre tant que le chargement n'est pas fait	
	newImg= new Image();
	newImg.name=aImg;
 	newImg.src=aSrc;
//Seuelement si on rollover sur une autre que la précedente
	if (aSrc != document.images.laPictureId.src){
 
		if (newImg.height==0){
            var appelSuivant = 'positionneVignetteProduct(' + aImg +')';
            setTimeout(appelSuivant, 5);
			}else{
			document.images.laPictureId.src = newImg.src;
			positionneVignetteProductSuite(newImg);
			clearTimeout;
   	 }
	}else{
	positionneVignetteProductSuite(newImg);
	}
}
 
function positionneVignetteProductSuite(newImg){
 
	if (document.images.laPictureId.complete){
	showId('laVignette');
	var height = newImg.height;
	var width = newImg.width;
             //********C'est ici que ça foire****
            // Aleatoireement ça me ressort pas les bonnes valeurs
             // Ici mes fonctions de calcul et positionnement (ça ça fonctionne
	aSizePic = JSresizePic(width,height,144,144);
	calculTaillePic(aSizePic[0],aSizePic[1],"viewImageProduct");
	aVisibility = true;
	}
 
}

le prie c'est que ça le fait que sur une ou 2 sur un jeu de test de 50 et que lorsque je fais le test avec une image qui foire mais associé a un autre identifiant ça fonctionne....ou pas

[SpaceFrog]

heu oui c'est archi plus que normal ...
le but étant de lancer une boucle setInterval pour savoir quand le complete de l'image et terminé ...

Avnt cela pour faire un teste tu peux mettre un bouton sur la page et attendre quelque secondes avant de cliquer dessus pour vérifier que c'est bien un souci de complete de l'image...
Si le problème n'intervient pas avec ce bouton tu pourras te lancer dans le setInterval

[leFred]

heu oui c'est archi plus que normal ...
le but étant de lancer une boucle setInterval pour savoir quand le complete de l'image et terminé ...

Avnt cela pour faire un teste tu peux mettre un bouton sur la page et attendre quelque secondes avant de cliquer dessus pour vérifier que c'est bien un souci de complete de l'image...
Si le problème n'intervient pas avec ce bouton tu pourras te lancer dans le setInterval

euh, j'ai pô tput compris la, il devra faire quoi le bouton ?

[SpaceFrog]

heu ... lancer ta fonction de retaillage pour voir si elle fonctionne ...

Tu peux aussi faire un bouton qui donne la recette des crèpes suzette mais ça n'a pas grand rapport avec ton souci du moment ...

[leFred]

Bon je vous remets le script en l'état actuel: ça marche nickel sous Ie mais sous ff au premier passage de souris ça ne recupere pas les bonnes valeurs width et height de l'image crée via new image; celles ci restent à 0 0 donc forcement vu que mon retaillage se fait en fonction du format de départ ça va me ressortir une image carrée (donc la fonction retaillage marche bien); par contre au deuxime passage souris (une fois que l'image est dans le cache) la ça roule..je ne trouve pas le moyen de bien initialiser les valaeurs width et height à transmettre:

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
23
24
25
26
27
 
function positionneVignetteProduct(aImg){
	aSrc = 'images/illustrations_bdd/miniatures/ID_'+aImg+'.jpg';
	//Attendre tant que le chargement n'est pas fait	
	newImg= new Image();
	newImg.src=aSrc;
	positionneVignetteProductSuite(newImg);		
}
 
function positionneVignetteProductSuite(newImg){
	document.images.laPictureId.src = newImg.src;
	showId('laVignette');
	var height = newImg.height;
	var width = newImg.width;
	document.getElementById('test').value= document.images.laPictureId.src+"\r" + width +" " +height+"\r";
	aNode = GetId("viewImageProduct");
	aNode.style.filter='Alpha(Opacity=60)';
	aNode.style.opacity='0.6';
	aNode.style.MozOpacity='0.6';
	aNode.style.display='block';
 
	aSizePic = JSresizePic(width,height,144,144);
	calculTaillePic(aSizePic[0],aSizePic[1],"viewImageProduct");
	aVisibility = true;
 
 
}

[SpaceFrog]

Code :

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

1
2
var height = newImg.oofsetHeight;
	var width = newImg.offsetWidth;

sinon regarde du coté de getComputedStyle

[leFred]

Bon ben il me semble que j'avais déja testé ça mais a priori ça à l'aire de marché....jusqu'au prochain coup, faut que je teste encore mais pour l'instant ce qui fonction c'est :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
 
function positionneVignetteProduct(aImg){
	aSrc = 'images/illustrations_bdd/miniatures/ID_'+aImg+'.jpg';
	//Attendre tant que le chargement n'est pas fait	
	newImg= new Image();
	newImg.src=aSrc;
	//Attendre que l'image soit chargée
	if (newImg.height==0){
	var actionSuivante = "positionneVignetteProduct(" + aImg + ")";
	setTimeout(actionSuivante,5);
	}else{
	clearTimeout();
	positionneVignetteProductSuite(newImg);	
	}
 
}
 
function positionneVignetteProductSuite(newImg){
	document.images.laPictureId.src = newImg.src;
	showId('laVignette');
	var height = newImg.height;
	var width = newImg.width;
	document.getElementById('test').value= document.images.laPictureId.src+"\r" + width +" " +height+"\r";
	aNode = GetId("viewImageProduct");
	aNode.style.filter='Alpha(Opacity=60)';
	aNode.style.opacity='0.6';
	aNode.style.MozOpacity='0.6';
	aNode.style.display='block';
 
	aSizePic = JSresizePic(width,height,144,144);
	calculTaillePic(aSizePic[0],aSizePic[1],"viewImageProduct");
	aVisibility = true;
 
 
}

[leFred]

Code :

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

1
2
var height = newImg.oofsetHeight;
	var width = newImg.offsetWidth;

sinon regarde du coté de getComputedStyle

Non pas plus qu'avec les clientHeight et width...j'ai tourné tout ça dans tout les sens mais je vois pas ce qui cloche m'enfin pour l'instant ça a l'aire de marcher, même si c'est un peu "bancal" !!!

[leFred]

parlé trop vite !!! redéconne sous Ie : image carrée !!!! arrrrrghhhh

[leFred]

Ce coup-ci je pense que c'est bon, je mets les commentaires dans le code:

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function positionneVignetteProduct(aImg){
	aSrc = 'images/illustrations_bdd/miniatures/ID_'+aImg+'.jpg';
 
	//Attendre tant que le chargement n'est pas fait	
	newImg= new Image();
	newImg.src=aSrc;
	//newImg.onLoad=positionneVignetteProductSuite(newImg);	
	//Attendre que l'image soit chargée
	if (newImg.height<144){//144 est la hauteur mini de visualisation, et comme précédemment je creé des miniatures de 150 mini de coté, tant qu'elle n'aura pas une taille superieure à la zone mini de visualisation, je continue de la charger
	var actionSuivante = "positionneVignetteProduct(" + aImg + ")";
	setTimeout(actionSuivante,100);
	}else{
	positionneVignetteProductSuite(newImg);	
	clearTimeout();
	}
 
}
 
function positionneVignetteProductSuite(newImg){
	document.images.laPictureId.src = newImg.src;
	showId('laVignette');
 
	aNode = GetId("viewImageProduct");
	aNode.style.filter='Alpha(Opacity=60)';
	aNode.style.opacity='0.6';
	aNode.style.MozOpacity='0.6';
	aNode.style.display='block';
	var height = newImg.height;
	var width =  newImg.width;
	document.getElementById('test').value= document.images.laPictureId.src+"\r" + width +" " +height+"\r";
	aSizePic = JSresizePic(width,height,144,144);
	calculTaillePic(aSizePic[0],aSizePic[1],"viewImageProduct");
	aVisibility = true;
 
 
}