Changer image tables après un intervalle de temps

2 pièce(s) jointe(s)

Bonjour,
le code ci dessous permet le changement des 3 images avec d autre 3 image après un intervalle de temps.
Le problème c 'est que dans quelque intervalle le champ du table devient videlle image se cache.
Svp de me donnez une solution.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<table width="1012" height="223" border="1" align="center">
  <tr>
  <td width="328"><table width="1012" height="223" border="1" align="center">
    <tr>
 
      <td width="341">
 
       <img src='image/image petite/1.jpg' style="display: block;">
     <img src='image/image petite/1b.jpg' style="display: none;" >
     <img src='image/image petite/1bb.jpg' style="display: none;" >
 
<script type="text/javascript">
     I = 0 ;
     Imax = document.images.length - 1 ;
     setTimeout(suivante, 2000) ;
    
     function suivante()
     {
     document.images[I].style.display = "none" ;
     if ( I < Imax )
          I++;
     else
          I=0;    
     document.images[I].style.display = "block";
     setTimeout(suivante, 2000) ;
     }
</script> 
      </td>
 
 
 
 
 
 
 
      <td width="321">
 
 
       <img src='image/image petite/2.jpg' style="display: block;">
     <img src='image/image petite/2b.jpg' style="display: none;" >
     <img src='image/image petite/3.jpg' style="display: none;" >
 
<script type="text/javascript">
     II = 0 ;
     IImax = document.images.length-1   ;
     setTimeout(suivante2, 1999) ;
    
     function suivante2()
     {
     document.images[II].style.display = "none" ;
     if ( II < IImax )
          II++;
     else
          II=0;    
     document.images[II].style.display = "block";
     setTimeout(suivante2, 1999) ;
     }
</script> 
 </td>
 
 
 
 
 
 
 
 
      <td width="328">
 
       <img src='image/image petite/3b.jpg' style="display: block;">
     <img src='image/image petite/2c.jpg' style="display: none;" >
     <img src='image/image petite/3f.jpg' style="display: none;" >
 
<script type="text/javascript">
     III = 0 ;
     IIImax = document.images.length -1 ;
     setTimeout(suivante3, 2001) ;
    
     function suivante3()
     {
     document.images[III].style.display = "none" ;
     if ( III < IIImax )
          III++;
     else
          III=0;    
     document.images[III].style.display = "block";
     setTimeout(suivante3, 2001) ;
     }
</script> 
 
 
      </td>
    </tr>
  </table>

Pièce jointe 224925
[Pièce jointe 224926

Citation:

Le problème c 'est que dans quelque intervalle le champ du table devient videlle image se cache.

Le problème c'est que l'ion ne comprend pas le problème ...
le champs du table devient videlle ????

La cellule du table devient vide pour quelques secondes.Et apres l intervalle choisie l image s affiche dans la cellule encore.
Exactement comme les 2 images.

Sans doute le temps que l'imgae se charge car elle ne sont par préchargées ...

Fais toi un preoader d'image afin de charger les images en mémoire, ainsi lors du changement de src (plutot que de jouer sur le display) l'image s'affichera immédiatement au lieu d'avoir à se charger avant de s'afficher ...

Pour chaque image:
Code:

1 2 3 4 5 var img1 = new Image(); img1.src= "image/image petite/1.jpg"; var img2 = new Image(); img2.src= "image/image petite/1b.jpg"; .../...
puis ne lancer le script de roulement qu'une fois les images chargées en utilisant le .loaded des images