Faire patienter avec image animée

Version imprimable

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

Script

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

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

Bonjour,

Code:

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

15/10/2015, 09h55
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 ?

Bonjour,

Essaie avec:

Code:

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

Code:

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

16/10/2015, 16h43
karamaster

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

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:

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>