execution de code en différé
Bonjour,
J'ai un petit souci pas évident à formuler.
Il s'agit d'exécuter du code après le chargement d'une page web, et lorsque le code s'exécute après et est assez long, il ne faudrait pas qu'il bloque l'utilisateur, qu'il soit en arrière plan en quelque sorte.
J'ai réduit mon problème à 3 tableaux à remplir.
Le premier se remplit au chargement de la page, et les deux autres (qui seraient cachés dans mon problème) se rempliraient idéalement après le chargement mais sans bloquer l'utilisateur qui doit pouvoir manipuler le premier tableau (ascenseur du div le contenant pour en examiner le contenu par exemple) sans être bloqué durant le chargement des deux autres.
Je ne sais pas si c'est clair mais voilà le code -certes peu rigoureux - :
Dans ce code, je charge en body.onload le premier tableau, j'attends 5 secondes pendant lesquelles je peux manipuler l'ascenseur du premier tableau, puis les deux autres se chargent mais -aïe- ça bloque alors la manipulation du premier.
Si vous pouviez éclairer ma lanterne... :)
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<html>
<head>
<script language="javascript" type="text/javascript" >
//////////////////////////////
function reste()
//////////////////////////////
{
oTab = document.getElementById("tab2");
for(var i=0;i<600;i++)
{
oRow=oTab.insertRow();
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table><table><tr><td>2</td></tr></table>";
}
oTab = document.getElementById("tab3");
for(var i=0;i<600;i++)
{
oRow=oTab.insertRow();
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table><table><tr><td>3</td></tr></table>";
}
};
//////////////////////////////
function init()
//////////////////////////////
{
oTab = document.getElementById("tab1");
for(var i=0;i<600;i++)
{
oRow=oTab.insertRow();
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
oCell=oRow.insertCell();
oCell.innerHTML="<table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table><table><tr><td>1</td></tr></table>";
}
setTimeout("reste()",5000);
};
</script>
</head>
<body onload="init()">
<div style="height:300px;overflow:scroll"><table border="1" id="tab1"></table></div>
<div style="height:300px;overflow:scroll;"><table border="1" id="tab2"></table></div>
<div style="height:300px;overflow:scroll;"><table border="1" id="tab3"></table></div>
</body>
</html> |
