Discussion :

[karamaster]

Bonjour, je voudrais su ma page chargée via ajax, faire patienter l'internaute avec une image animée.

Script

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
<script type="text/javascript">
 
     var xhr=null;
 
     function rafraichir()
     {
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
        else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
        else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
        xhr.open('GET','listet.php',true);
        xhr.onreadystatechange = ajaxReponse;
        xhr.send(null);
     }
 
     function ajaxReponse() {
 
		if(xhr.readyState == 3) { 
			 document.getElementById('loader').style.display = "block";
		}
		else if (xhr.readyState == 4 && xhr.status == 200) {
 
			document.getElementById('loader').style.display = "none";
			document.getElementById("affichage").innerHTML=xhr.responseText;
			var timer=setTimeout(rafraichir,10000);
        }
     }
   rafraichir(); 
</script>

Code html

Code html :

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

1
2
<div id="affichage"></div>
<div id="loader" style="display:none;"><img src="images/PlagiatLoading.gif" class="loader" /></div>

[andry.aime]

Bonjour,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
if(xhr.readyState != 4){
			 document.getElementById('loader').style.display = "block";
		}
		else {
 
			document.getElementById('loader').style.display = "none";
                        if (xhr.status == 200) { 
			           document.getElementById("affichage").innerHTML=xhr.responseText;
			           var timer=setTimeout(rafraichir,10000);
			} else {
			   alert("Erreur" + xhr.status +":"+ xhr.statusText );
			}
        }

[karamaster]

Salut, un soucis avec le code. Le loader ne s'affiche pas mais lorsque je teste si le readyState != 4 (test OK) en ce moment le loader s'affiche.
Faut-il mettre un pause de quelque seconde ?

[andry.aime]

Bonjour,

Essaie avec:

Code :

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

1
2
3
 xhr.open('GET','listet.php',true);
document.getElementById('loader').style.display = "block";
        xhr.onreadystatechange = ajaxReponse;

et

Code :

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

1
2
3
4
5
6
7
8
9
10
		if(xhr.readyState == 4) {
 
			document.getElementById('loader').style.display = "none";
                        if (xhr.status == 200) { 
			           document.getElementById("affichage").innerHTML=xhr.responseText;
			           var timer=setTimeout(rafraichir,10000);
			} else {
			   alert("Erreur" + xhr.status +":"+ xhr.statusText );
			}
        }

A+.

[karamaster]

Le code ne marche pas en plus le fichier liste.php n'est pas chargé dans la div affichage.

[karamaster]

J'ai trouvé une solution mais après le chargement de la page, le script faire une pause d'environ 15s avec de lancer le loader

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
<script type="text/javascript">
 
     var xhr=null;
 
     function rafraichir()
     {
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
        else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
        else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
        xhr.open('GET','listetrajet.php',true);
        xhr.onreadystatechange = ajaxReponse;
        xhr.send(null);
     }
 
     function ajaxReponse() {
 
		if(xhr.readyState != 4) { 
			document.getElementById('loader').style.display = "block";
		}
		else {
			if(xhr.status == 200) {
				document.getElementById("affichage").innerHTML=xhr.responseText;
				document.getElementById('loader').style.display = "none";
				var timer=setTimeout(rafraichir,10000);
			}
        }
     } 
 
   rafraichir(); 
</script>