Afficher un div pendant un traitement client javascript

**predalpha** · 14/10/2008, 14h57

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 :

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

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 ?

**SpaceFrog** · 14/10/2008, 15h12

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

**predalpha** · 14/10/2008, 15h36

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 :

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

**E.Bzz** · 14/10/2008, 15h48

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+

**SpaceFrog** · 14/10/2008, 16h04

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

**predalpha** · 14/10/2008, 16h40

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 :

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

**E.Bzz** · 14/10/2008, 16h44

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+

**SpaceFrog** · 14/10/2008, 16h44

ton gif a-t-il fini de charger ?
c'est une image preloadeée ?

**predalpha** · 14/10/2008, 16h48

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.

**predalpha** · 14/10/2008, 17h45

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.

++

**E.Bzz** · 14/10/2008, 17h51

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()

A+

**SpaceFrog** · 14/10/2008, 18h14

ou dans le gif ...

**predalpha** · 15/10/2008, 09h06

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()

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.

**SpaceFrog** · 15/10/2008, 09h11

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

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

**predalpha** · 15/10/2008, 11h58

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.

Afficher un div pendant un traitement client javascript

JavaScript

Discussions similaires

Partager

Partager