IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Ordre d'execution avec ajout dans DOM


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    162
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : Suisse

    Informations forums :
    Inscription : Janvier 2007
    Messages : 162
    Par défaut Ordre d'execution avec ajout dans DOM
    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

  2. #2
    Inactif  
    Profil pro
    Inscrit en
    Novembre 2002
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2002
    Messages : 123
    Par défaut 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.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    162
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : Suisse

    Informations forums :
    Inscription : Janvier 2007
    Messages : 162
    Par défaut
    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.

  4. #4
    Inactif  
    Profil pro
    Inscrit en
    Novembre 2002
    Messages
    123
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2002
    Messages : 123
    Par défaut
    Citation Envoyé par pelloq1 Voir le message
    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

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 208
    Par défaut
    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

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    162
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : Suisse

    Informations forums :
    Inscription : Janvier 2007
    Messages : 162
    Par défaut
    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

  7. #7
    Candidat au Club
    Profil pro
    Inscrit en
    Mars 2012
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2012
    Messages : 4
    Par défaut
    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);

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2007
    Messages
    162
    Détails du profil
    Informations personnelles :
    Âge : 48
    Localisation : Suisse

    Informations forums :
    Inscription : Janvier 2007
    Messages : 162
    Par défaut
    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

Discussions similaires

  1. [AC-2003] Formulaire en continu avec ajout dans le pied de page
    Par buzz73 dans le forum IHM
    Réponses: 4
    Dernier message: 22/07/2009, 11h26
  2. Réponses: 9
    Dernier message: 17/06/2009, 20h29
  3. Réponses: 1
    Dernier message: 31/10/2008, 00h20
  4. Réponses: 3
    Dernier message: 14/12/2007, 09h04
  5. Réponses: 3
    Dernier message: 29/08/2007, 20h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo