Discussion :

[Freedolphin]

Bonjour,

J'utilise un loader en gif qui fonctionne très bien dans le cas d'un (re)chargement de page.
Mais j'aimerais obtenir le même résultat après le lancement d'un formulaire et requête php/mysql un peu longue.
J'ai lu des dizaines de tutos et autres qui préconisent l'utilisation d'ajax, mais je ne sais pas comment adapter mon code.
Quelqu'un peut-il me donner quelques pistes ?

Voici le code original :

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
<div id="loader"></div>
 
<SCRIPT LANGUAGE="JavaScript">
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.loader }
else if (dom) { cach = document.getElementById("loader").style }
else if (iex) { cach = loader.style }
largeur = screen.width;
cach.left = Math.round((largeur/2)-200);
cach.visibility = "visible";
 
function loaderOff()
	{
	cach.visibility = "hidden";
	}
window.onload = loaderOff
</SCRIPT>

Merci d'avance !

[NoSmoking]

Bonjour,
je ne sais où tu as trouvé ton script mais il date quand même beaucoup (var nava = (document.layers) en dit long).

et autres qui préconisent l'utilisation d'ajax, mais je ne sais pas comment adapter mon code.

comme on n'a pas ton code on ne pourra pas te dire précisément, pour le principe, avant appel de ta fonction Ajax tu affiches ton loader et au retour de la requête tu le masques.

[Freedolphin]

je ne sais où tu as trouvé ton script mais il date quand même beaucoup

Je l'avais trouvé sur un tuto, je suis très limité en JS.

comme on n'a pas ton code on ne pourra pas te dire précisément

Le code était affiché plus haut.

avant appel de ta fonction Ajax tu affiches ton loader et au retour de la requête tu le masques.

Le loader est présent sous la forme d'une DIV, stylée en CSS. Je peux donc ajouter un display:none et modifier cette class par la fonction. Mais je ne sais pas du tout comment écrire celle-ci. As-tu un début de commencement ?

[NoSmoking]

Le code était affiché plus haut.

Je ne vois pas de code mais juste un morceau de page qui devrait affiché une image de loading puis disparaître en fin de chargement de la page.

En fait tu n'as aucune garantie que l'image soit chargée et affichée avant la fin de l'affichage de ta page.

Mais j'aimerais obtenir le même résultat après le lancement d'un formulaire et requête php/mysql un peu longue.

Là plus rien ne t'appartient et le navigateur peut tout à fait figer l'affichage, d'autant que tu n'as aucune garantie que les différents navigateurs ne réagissent de la même façon.

[Freedolphin]

Ce n'est pas un "morceau de page" mais l'intégralité du code JavaScript utilisé, qui encore une fois, fonctionne très bien sur un chargement de page de type "entrée" ou F5.
L'idée est de lancer un tel script pendant une requete mysql lancée par un form présent sur la page.
Pour ce qui est du navigateur, pas de problème de ce côté puisque c'est pour un back-office (donc non public).

Je suis arrivé à un résultat très satisfaisant avec ces quelques lignes (et en utilisant Jquery) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<div id="ajax-loading"></div>
 
<SCRIPT LANGUAGE="JavaScript">
jQuery(function($){
    $('#ajax-loading').hide(); // On masque le gif au chargement de la page
 
    $('#ajax-load').click(function(e){
        // Affichage du gif de chargement
        $('#ajax-loading').show();
    });
});
</SCRIPT>

Puis sur mon formulaire, j'ai ajouté un ID au submit :

Code :

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

<input type='submit' value='ok' id='ajax-load'>

Je précise que la DIV contient le GIF en background.

Bon, le top, ce serait de me passer de ce bouton et de lancer le formulaire avec le select et un "onchange=submit()", mais ça ne veut pas. C'est déjà très bien comme ça, et ça servira peut-être à d'autres.