Bonjour à tous,

J'utilise une api pour faire de la géolocalisation, et comme c'est fois assez long à charger, j'aimerais afficher un loader pendant le temps de chargement pour bien montrer a l'utilisateur que cela fonctionne.

// Vérification de la distance entre deux rdv
	function checkDistance(){
		var start = $("#date_rdv").val() + ' ' + $("#start_h").val() + 'h' + $("#start_m").val();
		var vrp = <?=$vrp_id?>;
		$.post("../scripts/check_distance.php", { vrp : vrp, start : start },
		function(data){
                        // Insertion de champs hidden pour récupérer les valeurs renvoyées par le script
			$("#geoloc").html(data);
			search_start_location();
		});		
	}
	
	// Calcul de l'itinéraire avec Viamichelin

	/* Clé API ViaMichelin */
	 VMAPI.registerKey("JSGP20100225173214620514076783");
	 VMAPI.setLanguage("fra");

	 /* Transformer l'adresse de départ, celle du rdv précédent, en un point géocodé */
	 function search_start_location(){
		 Start_geocoder = new VMGeocoder();
		 Start_myaddress = new VMAddress();
		 
		 Start_myaddress.address = $("#adresse1").val() + ' ' + $("#adresse2").val();
		 Start_myaddress.zipCode = $("#code_postal").val();
		 Start_myaddress.city = $("#ville").val();
		 Start_myaddress.country = "france";
		 
		 Start_geocoder.search(Start_myaddress);
		 Start_geocoder.addEventHandler("onCallBack",search_stop_location);
	 }
	 
	 /* Transformer l'adresse d'arrivée, celle qui vient d'être saisie, en un point géocodé */
	 function search_stop_location(){
		 Stop_geocoder = new VMGeocoder();
		 Stop_myaddress = new VMAddress();
		 
		 Stop_myaddress.address = $("#previous_adress").val() + ' ' + $("#previous_adress2").val();
		 Stop_myaddress.zipCode = $("#previous_code_postal").val();
		 Stop_myaddress.city = $("#previous_ville").val();
		 Stop_myaddress.country = "france";

		 Stop_geocoder.search(Stop_myaddress);
		 Stop_geocoder.addEventHandler("onCallBack",search_iti);
	 }
	 function search_iti(){
		 myiti = new VMItinerary();
		 myiti.addStopOver(Start_geocoder.result);		 
		 myiti.addStopOver(Stop_geocoder.result); 
 
		 myiti.search();
		 myiti.addEventHandler("onCallBack",iti_found);
	 }
	 
	 function iti_found(){
		 var totalTime = myiti.getTotalTime();
		 alert(totalTime / 3600 + " H");
	 }

Merci d'avance pour tous vos coup de main

Qu'est-ce que tu appelles un loader?

une image qui s'affiche pendant le traitement?
Si c'est le cas tu peux afficher une image avant ton traitement puis lancer ton véritable traitement avec un setTimeout de 10ms afin de rendre la main au navigateur (ça lui laisse le temps d'afficher l'image). Si tu ne lui rend pas la main l'image ne sera afficher que sous Opera et Safari (les autres navigateurs ne changent pas l'affichage tant que le javascript tourne)
A la fin de ton traitement tu supprimes ton image.

Effectivement un loader est pour moi une tite image qui tourne pendant le chargement de la page.
En fait ce que j'arrive déjà à faire, c'est afficher ce loader pendant que les données sont envoyées à un script via ajax.
Mais l'image arrête de s'afficher pendant que l'api charge, j'aimerais réussir à la faire tourner aussi pendant ce chargement là

Citation : jbduzan

Mais l'image arrête de s'afficher pendant que l'api charge, j'aimerais réussir à la faire tourner aussi pendant ce chargement là

Ça veut dire que l'image disparait ou que l'image ne bouge plus?

Elle disparait complètement.

EDIT : j'ai utilisé ce tuto pour l'affichage du loader pendant le chargement.
tuto

donc le problème doit venir du fait que tu enlèves (caches) l'image trop tôt.
Peux-tu montrer quel est la fonction callback que tu utilises? Car je suppose qu'à un certain moment il rend la main alors que le traitement n'est pas fini ce qui a pour conséquence de continuer à exécuter la suite du code et donc de cacher ton image.

function request(callback) {
	var xhr = getXMLHttpRequest();
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
			document.getElementById("loader").style.display = "none";
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};
	var end = $("#date_rdv").val() + ' ' + $("#end_h").val() + 'h' + $("#end_m").val();
	var vrp = <?=$vrp_id?>;
	xhr.open("GET", "../scripts/check_distance.php?end=" + end + "&vrp=" + vrp, true);
	xhr.send(null);
}

function readData(sData) {
	alert(sData);
}

et je l'apelle de la manière suivante

<button type='button' name='distance' id='distance' onclick='request(checkDistance);'>Verifier la distance</button>

Je pense que ça vient de là, ne connaissant pas vraiment xhr, et ayant suivit aux maximum le tuto que je t'ai mis plus haut.

Dans ta fonction checkDistance (qui est la fonction de callback) il y a ce code: $.post(" je suppose que ce doit également exécuter une requête AJAX. Et donc de manière asynchrone.
Ainsi il ne faut pas mettre la ligne document.getElementById("loader").style.display = "none";
là où elle est actuellement mais (je suppose) mais après ta ligne 9 du premier code que tu as posté (dans la fonction qui est dans la fonction checkDistance)

Oui c'est effectivement pour exécuter une requête ajax.
Je vais essayer tout à l'heure si j'ai le temps, étant partit sur autre chose.
Sinon réponse la semaine prochaine après le weekend, n'ayant pas accés aux serveurs de ma boite en externe^^