Discussion :

[krfa1]

Bonjour,

J'ai une petite question, je souhaiterais afficher une icone chargement en cours dans un script ajax, mais je sais pas trop comment faire, est-ce que quelqu'un pourrait me donner un petit coup de main?

Voici mon code

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
34
35
36
37
38
39
40
41
42
43
 
<script type='text/JavaScript'>
	function getXhr(){
		var xhr = null; 
		if(window.XMLHttpRequest) // Firefox et autres
			{
		   xhr = new XMLHttpRequest(); 
		   }
		else if(window.ActiveXObject){ // Internet Explorer 
		   try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
		}
		else { // XMLHttpRequest non supporté par le navigateur 
		   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		   xhr = false; 
		} 
		return xhr
	}
 
	/**
	* Méthode qui sera appelée sur le click du bouton
	*/
	function go(variable){
		var xhr = getXhr()
		// On défini ce qu'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
 
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
				{
				document.getElementById('image').innerHTML = xhr.responseText;
				}
		}
		xhr.open("GET","./pages/chargement_album.php?"+variable,true);
		xhr.send(null);
	}
go()
</script>
<div id="image">
</div>

merci d'avance infiniment pour votre aide

[Sly^iti]

quand status = 3 tu rempli ton div avec ce que tu veux.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
xhr.onreadystatechange = function(){
 
  if(xhr.readyState == 3) {.
    document.getElementById('image').innerHTML = "Loading";
  }	
  else if(xhr.readyState == 4 && xhr.status == 200)
  {
    document.getElementById('image').innerHTML = xhr.responseText;
  }
}

[krfa1]

Merci bien pour ta réponse, mais maintenant j'aurais une petite question, car mon script ajax va rechercher un page ou il y a à chaque fois environ 30 photos qui s'affiche, comment pourrais-je faire pour que tout le temps que l'explorer n'a pas télécharger les photos, qu'il y ait le logo chargement en cours?

Merci d'avance pour vos précieuse réponse

[krfa1]

UP

[slater]

dans ta page php qui affiche tes photos:

un <div id="preload">Image de chargement</div>

et un <div id="photos">Image Image Image Image</div>

dans une fonction onLoad, tu pourrais

cacher le div photos.
preloader toutes les images.
cacher le div preload.
afficher le div photos.

A tester...

Pour bien te former: Cours et tutoriels pour apprendre JavaScript


GS