Notification de chargement sans framework

[Flynt]

Bonjour,

J'utilise de nombreux appels Ajax sur un site que je suis en train de développer, et j'aimerais donc logiquement faire apparaitre une notification de chargement.
Malheureusement je n'utilise pas de framework spécifique, j'aimerais donc obtenir en gros le même résultat qu'avec prototype.js sur cette page :
http://ajaxian.com/archives/ajax-act...ators-examples

J'ai essayé de jouer avec
if(xhr.readyState == 1)
// J'affiche mon image de chargement
if(xhr.readyState == 4 && xhr.status == 200)
// Je cache mon image de chargement

Mais cette technique est boiteuse et de nombreux appels sont fait inutilement.

[franculo_caoulene]

Salut,

As-tu lu le message posté juste avant dans un autre fil de discussion? http://www.developpez.net/forums/sho...13&postcount=5

[Flynt]

Non je ne l'avais pas lu.

Entre temps j'ai trouvé une astuce sur ce cours :
http://gael-donat.developpez.com/web/intro-ajax/#LIII-B

Malheureusement ça ne marche toujours pas comme je le voudrais.
Je m'explique, j'ai :

Code :

1
2
3
4
5
6
7
8
 
function recup()
{
window.document.getElementById("chargement").className="tumevois";
alert("Chargement");
// APPEL AJAX ( 30 appels environ et 10 secondes d'attente)		document.getElementById("chargement").className="tumevoispas";
return 1;
}

Donc déjà si je suis le lien que tu m'as donné, le code de chargement va s'éxécuter 30 fois ce qui est lourd, je préfère encadrer mes appels ajax de chargement marche/arret.

Le problème est que si je ne met pas mon alert, le code

Code :

1
2
 
window.document.getElementById("chargement").className="tumevois";

ne s'éxecute pas...

[Flynt]

si quelqu'un à une idée je suis preneur j'ai toujours ce problème.

[diden138]

ben ça framework moi je fais ça (pour un moteur de recherche par exemple)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
xhr.onreadystatechange=function()
    {
		if (xhr.readyState==4 && xhr.status==200)
		{
		  recherche=xhr.responseText;
		  document.getElementById("article").innerHTML=recherche;
 
		}
 
		else
		{
 
		  document.getElementById("article").innerHTML="<div class='chargement' id='loading'>recherche en cours par exemple </br> <img src=\"images/loading.gif\" alt=\"loading\"  />  </div>";
 
		}
 
 
	}

pour les images(loading.gif) tu trouvera ton bonheur ici
cordialement @+

[Flynt]

merci pour ta réponse diden,

malheureusement mon nombre d'appel ajax étant conséquent, ta technique alourdit beaucoup mon traitementil faudrait que je puisse entourer les appels ajax avec

AfficherChargement();
AppelsAjax;
MasquerChargement();

plutot que de chaque fois traiter l'image de chargement dans AppelsAjax qui s'éxécute un certain nombre de fois.

[diden138]

je ne vois pas pourquoi ça alourdirait explique je peux pas t'aider comme ça sinon si je suis ta logique j'aurais fais avant la boucle xhr.onreadystatechange j'affiche un div contenant l'image du loading j'appelle la fonction xhr.onreadystatechange .aprés je masque le div tous simplement ça donnerais ça

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function traitement()
{ document.getElementById("article").innerHTML="<div class='chargement'   id='loading'>recherche en cours par exemple </br> <img src=\"images/loading.gif\" alt=\"loading\"  />  </div>";
 
xhr.onreadystatechange=function()
    {
		if (xhr.readyState==4 && xhr.status==200)
		{
		  recherche=xhr.responseText;
		  document.getElementById("article").innerHTML=recherche;
 
		}
  }
	document.getElementById("article").innerHTML="";
}

ou tu bloque exactement j'ai pas compri ?
cordialement @+

[Flynt]

Je te donne un extrait de mon code pour que tu ai une idée de ce que je fais;

Sur ma page html qui effectue les appels ajax :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<img border="0" src="Modulo_Images/add.png"  onClick="RecupDonnees();">
 
<script>
RecupDonnees()
{
AppelAjax1(...,FlagAffichChargement);
AppelAjax2
...
...
AppelAjax30(...,FlagMasqueChargement);
}
</script>

Dans ma page js qui créer l'XMLHttpRequest :

Code :

1
2
3
4
5
6
7
 
var xhr = ObtenirXhr();			
xhr.onreadystatechange = function(){
if ( FlagAffichChargement)
document.getElementById("chargement").className="afficher";
if ( FlagMasqueChargement)
document.getElementById("chargement").className="cacher";