Ordre d'execution avec ajout dans DOM

Version imprimable

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:

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

02/03/2012, 20h23
olivieram

une idée comme ça

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.
02/03/2012, 20h58
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.
02/03/2012, 21h13
olivieram

Citation:

Envoyé par pelloq1

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
02/03/2012, 22h34
NoSmoking

Bonsoir,

Citation:

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

Citation:

...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 :fleche: 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
06/03/2012, 09h02
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

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

Code:

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

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:

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