Discussion :

[pelloq1]

Bonjour,

J'un problème de timing et ordre dans mes fonctions. Je précise que je travaille avec l'api de google maps, mais que le problème n'est pas lié.

En résumé :

- Je génère avec php un fichier XML contenant mes données (données aléatoires)
- Je lis ce fichier avec JS grace a la commande 'downloadUrl' de l'outil de google (http://gmaps-samples-v3.googlecode.c...nk/xmlparsing/)
- Je précharge mes icones de markers en les ajoutant au DOM dans un div invisible
- Je charge mes markers sur la carte en chargeant une icone perso (préchargée), que je redimenttionne avec un 'new google.maps.MarkerImage(icone, null, null, null, scale)'
- Tout fonctionne très bien.

Voici mon code (abbreggé) :

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
	downloadUrl(searchUrl, function(data) {
		preloadImg(data); 
		getMarkers(data);
	});
 
	function preloadImg(data){
		markersXml = data.documentElement.getElementsByTagName(\"marker\");
		for (var i = 0; i < markersXml.length; i++) {
			var img = document.createElement('IMG');
			img.src = markersXml[i].getAttribute('icon') ;
			document.getElementById('preloadimages').appendChild(img);
		}
	}
 
	function getMarkers(data) {
		markersXml = data.documentElement.getElementsByTagName(\"marker\");
		for (var i = 0; i < markersXml.length; i++) {
 
			// prépare les markers
 
			// assigne l'icone à la bonne taille
			scale = 0.5 ;
			icone = new google.maps.MarkerImage(markersXml[i].getAttribute('icon'), null, null, null, scale) ;	
 
			// attache les markers a la carte
		}
	}

Le problème est que apparement il n'attend pas que toutes les images soient préchargées avant de placer les markers. De ce fait il ne parvient pas à les redimentionner. En fait il en redimentionne une dizaine, et les suivante sont de taille normale, comme si il n'attendais pas.

Mon problème ne vient pas de google maps, car si dans preloadImg(data); je ne charge qu'une image manuellement, cela fonctionne très bien, elle est bien dimentionnée dans la carte

Donc ma question est de savoir comment je peux etre sur que l'ajout des images dans le DOM est réelment terminé avant de continuer mon code.

J'avais pensé a un settimeout mais cela ne parait pas très pro...

Toute aide est bienvenue.

Merci, Cédric

[olivieram]

du fait que c'est aléatoire, c'est le cache IE qui a déjà les images téléchargées.
Je te propose :
1- de faire un reset du cache IE et de tester à nouveau
2- d'essayer de télécharger d'un coup toutes les images au départ.

Désolé, je n'ai pas lu ton roman là-dessus, c'est juste une idée qui m'a fait toc.

[pelloq1]

Oui, alors en effet, j'ai oublié de préciser dans mon roman, après le premier chargement, c'est bon les images sont dans le cache, et cela fonctionne, le problème apparait au premier chargement sur la machine ou après CTRL+F5.

Ben les images j'essaie de les charger au départ ... C'est justement mon problème.

[olivieram]

Ben les images j'essaie de les charger au départ ... C'est justement mon problème.

tu peux aller chercher toutes les images en faisant une recherche JQuery dans le document HTML sur la balise IMG. J'ai pas le bout de code sous la main mais google est ton ami.

Bon courage

[NoSmoking]

Bonsoir,

Je précise que je travaille avec l'api de google maps, mais que le problème n'est pas lié.

je veux bien te croire, bien que...

...je redimenttionne avec un 'new google.maps.MarkerImage(icone, null, null, null, scale)'

ce qui n'est pas la syntaxe préconisée par la documentation http://code.google.com/intl/fr/apis/...ml#MarkerImage

Peut être un rapport avec le problème rencontré sur [Google Maps] Souci avec MarkerImage sous IE

[pelloq1]

No Smoking (too), le redimentionnement fonctionne très bien avec une seule image, ou les images en dur dans la page. Meme en les mettant dynamiquement cela marche, mais seulement sur 2 ou 3.

Pour moi c'est 'juste' j problème de timing, car les images n'ont pas le temps de se preloader dans mon div hidden avant d'etre affichées comme markers redimentionnés.

olivieram, je ne vois pas très bien ou tu veux en venir ....

Cédric

[john22]

Il faut utiliser un système de callback sur le chargement de tes images, comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var url = "http://www.gizmodo.fr/wp-content/uploads/2011/11/google_logo_682_571408a.jpg";
 
var img = new Image();				
 
$(img).load(function () { // chargement de l'image terminé avec succes			
	$("#container_image").html(img);
 
}).error(function () { // erreur lors du chargement de l'image	
	$("#container_image").html("");
 
}).attr("src", url);

[pelloq1]

Merci de vos réponses. Je ne m'en sors pas. Avec le callback non plus, j'ai donc provisoirement mis cela en setTimeout 20ms par image.

C'est pas idéal, mais j'ai pas trouvé mieux.

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
	function fonctionGenerale(){
		...
		downloadUrl(searchUrl, function(data) { getIconsMarkers(data);});
		...
	}
 
 
 
	function getIconsMarkers(data){
		var nbrCust = 0;
		nbrCust = preloadavatar(data, nbrCust);	
 
		var delay = function() { getMarkers(data); };
		setTimeout(delay, nbrCust*60);
	}
 
 
 
	function preloadavatar(data, nbrCust){
		if (data) {	
			for (var i = 0; i < markersXml.length; i++) {
				var img = document.createElement('IMG');
				img.src = markersXml[i].getAttribute('icon') ;
				nbrCust++ ;
			}					
		}
		return nbrCust ;
	}
 
 
	function getMarkers(data) {
			if (data) {	
	...

Alors si quelqu'un arrive à dépatouiller ça, je lui en serai reconnaissant.


Cedric