Afficher un div pendant un traitement client javascript

Version imprimable

14/10/2008, 14h57
predalpha

Afficher un div pendant un traitement client javascript
Bonjour à tous,

je me galère depuis des heures pour essayer d'afficher un div contenant une image lors d'un traitement javascript qui peut durer plusieurs secondes.

Ce traitement jscript permet de récupérer un tableau html afin de lui fixer ses entetes. Il redessine ainsi le tableau avec des scrolls. Il est executé coté client sur le click d'un bouton.
Malheureusement selon la taille initiale de ce tableau la fonction peut durer un certain temps.

Alors pendant ce temps je veux afficher mon div avec une image indiquant de patienter.

Au niveau du code, je suis arrivé à un certain résultat :
Code:

1 2 3 4 document.getElementById("waitDiv").style.display="block"; mafonctiondetraitementjscript(); document.getElementById("waitDiv").style.display="none";
Le problème c'est que je ne vois rien. Ma page se freeze jusqu'à l'affichage finale de mon tableau. Alors j'ai mis un alert('coucou'); après ma première ligne de code pour voir ce qui se passe et mon div s'affiche bien mais l'image gif qu'il contient reste figé.

Je me demande ce que je peux faire. On dirait qu'il faudrait que j'execute la lourde fonction javascript en asynchrone, est-ce possible?
Voyez-vous d'autres solutions ?
14/10/2008, 15h12
SpaceFrog

il faut passer par une variable flag (témoin)

et une boucle setInterval qui vient tester regulièrement cette variable ...

au debut du traitement tu mets la vairable = false
en fin de traitemetn tu le remets à true

la boucle setInterval vient tester ce flag et modifie ce que tu veux quand il redevient true

arf j'ai testé mais cela ne fonctionne pas. Je fais peut-etre erreur au niveau de mon code. mon timer lance des intervals uniquement dès que ma lourde fonction à laissé la main.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function test(content) { var boli = false; var t1 = setInterval("displayz("+boli+")",1000); CreateScrollHeader(content,true,true,40,200,boli); clearInterval(t1); } function displayz(b) { if (b=true) { alert("affiche"); } else { alert("masque"); } }
Ce que je recherche, 'j'ai l'impression serait presque du multithread.

14/10/2008, 15h48
E.Bzz

Bonjour,
pour éviter ce problème, as-tu essayé de lancer CreateScrollHeader() par un setTimeout() (de 1ms, par exemple).
Ca devrait éviter d'attendre que ta fonction rende la main, justement ...

A+

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
31
32
33
34
35
36
37
38
39
<html>
<head>
<script type="text/javascript">
<!--
var flag=false;
var runCheck;
 
function traitement(){
    for(i=0;i<100;i++){
 
    if(i==99){flag=true;}
 
    }
 
}
 
function checkFlag(){
if(flag){clearInterval(runCheck)
document.getElementById('mire').style.display='none'
 
}
 
}
 
function Launch(){
document.getElementById('mire').style.display="block";
 
traitement()
runCheck=setInterval(function(){checkFlag()},1000)
 
}
//-->
</script>
</head>
<body>
<div id="mire" style='display:none'> Traitement en cours ... </div>
<input type='button' value="go" onclick="Launch()" style="width:300px">
</body>
</script>

Merci pour vos conseils Spacefrog et E.bzz.
Un mix de vos deux solutions m'ont au moins permis d'afficher l'image pendant l'execution de mon traitement.

C'est déjà pas mal. Ci-dessous voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var bolus=true; var runCheck; function test(content) { document.getElementById('img_wait').style.display='block'; setTimeout(function(){CreateScrollHeader(content,true,true,40,200)}); runCheck=setInterval(function(){displayz()},1000); } function displayz() { if(bolus){ clearInterval(runCheck) document.getElementById('img_wait').style.display='none'; } }
Mais j'ai toujours le soucis suivant. L'image censée faire patienter est un gif animé , qui ne l'est pas pendant le traitement.
Si vous avez des conseils ? En tout cas merci pour votre aide qui m'a permis d'avancer.

14/10/2008, 16h44
E.Bzz

Citation:

Envoyé par predalpha

Mais j'ai toujours le soucis suivant. L'image censée faire patienter est un gif animé , qui ne l'est pas pendant le traitement.

J'ai peur que JS ne puisse rien pour toi à ce niveau là :?

A+
14/10/2008, 16h44
SpaceFrog

ton gif a-t-il fini de charger ?
c'est une image preloadeée ?
14/10/2008, 16h48
predalpha

Le gif est très léger 20ko.
Ma page est toute chargée seulement le bloc contenant l'image est display:none

Je pense que le traitement peut etre suffisamment lourd pour bloquer toute animation. Je vais essayer avec plus petit pour voir.
14/10/2008, 17h45
predalpha

Merci encore pour les conseils.

J'ai réalisé encore quelques tests.
- Un gif plus petit ne change rien.
- Utilisation d'une fonction de pause en esperant que la gif s'anime mais non.

Je garde une petite piste sous le coude :
lorsque je place un alert juste après l'affichage de ma gif, je la vois s'animer derrière. En gros, il faudrait que je simule des actions qui rendent la main à l'utilisateur et qui la reprenne successivement pour réaliser mon opération.

++
14/10/2008, 17h51
E.Bzz

Citation:

Envoyé par predalpha

Je garde une petite piste sous le coude :
lorsque je place un alert juste après l'affichage de ma gif, je la vois s'animer derrière.

Ben, c'est pas juste que l'alert() suspend les traitements qui, justement, empêchent le clignotement ?

Si tu dois mettre une alert() pour que l'utilisateur voit clignoter le gif qui lui dit "Traitements en cours", autant mettre le message dans l'alert() :aie:

A+
14/10/2008, 18h14
SpaceFrog

ou dans le gif ...
15/10/2008, 09h06
predalpha

Citation:

Envoyé par E.Bzz

Ben, c'est pas juste que l'alert() suspend les traitements qui, justement, empêchent le clignotement ?

Si tu dois mettre une alert() pour que l'utilisateur voit clignoter le gif qui lui dit "Traitements en cours", autant mettre le message dans l'alert() :aie:

A+

Non si je mets l'alert c'est juste dans le cadre de tests sinon je ne me serais pas ennuyer à faire cela. L'alert lorsqu'elle apparait semble rendre la main à l'utilisateur en suspendant le gros traitement (on dirait). C'est uniquement dans ce cas là que ma gif s'anime (tant que l'alert est visible) sinon elle est freezée si je ne mets pas l'alert.

à tout hasard essaye d'externaliser la fonction qui rend l'image visible ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var bolus=true;
var runCheck;
function test(content)
{
showImage();
setTimeout(function(){CreateScrollHeader(content,true,true,40,200)});
runCheck=setInterval(function(){displayz()},1000);
}
function displayz()
{
if(bolus){
clearInterval(runCheck)
document.getElementById('img_wait').style.display='none';
}
}
 
function showImage(){document.getElementById('img_wait').style.display='block';}

15/10/2008, 11h58
predalpha

Arf dommage mon spacefrog, cela n'a pas amélioré la situation.
L'image demeure figée. J'ai plus qu'à la changer car sans multithread ou gestion du proc je crois que l'on se heurte à un mur.

Merci encore pour vos aides. Je laisse le topic ouvert si vous avez encore des idées.