retaillage d'image et instanciation

Version imprimable

03/12/2008, 17h39
leFred

retaillage d'image et instanciation

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 :D ) 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 ?
03/12/2008, 17h43
Bovino

Essaye de lancer ta fonction sur le onload de l'image.
03/12/2008, 17h53
leFred

j'ai fait aussi mais ça n'a rien donné de mieux....
03/12/2008, 17h54
SpaceFrog

Peut êtrre tester le complete de l'image avent de lui appliquer la fonction
03/12/2008, 17h58
Bovino

Citation:

Envoyé par leFred

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

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:

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:cry:

03/12/2008, 18h14
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
03/12/2008, 18h16
leFred

Citation:

Envoyé par 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

euh, j'ai pô tput compris la, il devra faire quoi le bouton ?
03/12/2008, 18h19
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 ...:aie:

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:

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

04/12/2008, 14h35
SpaceFrog
Code:

1 2 var height = newImg.oofsetHeight; var width = newImg.offsetWidth;
sinon regarde du coté de getComputedStyle

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:

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

:yaisse2:

04/12/2008, 14h38
leFred
Citation:
Envoyé par SpaceFrog

Code:

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" !!!
04/12/2008, 14h42
leFred

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

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

Code:

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