Ne rafraîchir que les images

Version imprimable

Bonjour à toutes et à tous,

Dans ce code HTML créé dynamiquement, la page se rafraîchit toutes les 10s.

Est t'il possible de ne rafraîchir que les images ?

Voici le code :

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
 
u:='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">'#10#13+
       #10#13+
      '<html>'#10#13+
      '<head>'#10#13+
      '<title>SURVEILLANCE</title>'#10#13+
 
//***********mise à jour du taux de rafraichissement**********************
 
      '<META http-equiv="Refresh" content="'+inttostr(Ed_refresh.Value)+'">'#10#13+
 
'</head>'#10#13+
'<BODY ms_positioning="gridlayout" leftMargin=0 bgcolor="#000080" >'#10#13+
'<FORM NAME="mail" METHOD=GET ACTION="/cgi-bin/mailer">&nbsp;&nbsp;&nbsp;&nbsp;<INPUT NAME="RESTE" SIZE=5 MAXLENGTH=5 style="color: #00FF00; border-style: outset; border-width: 1; background-color: #000000">'#10#13+
'</FORM>'#10#13+
'<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>'#10#13+
'&nbsp;</p>'#10#13;
      if alarme then
      begin
        t1:=60;
	      u:=u+'<p align="center"><font face="Arial Narrow" size="6" color="#FF0000">ALERTE !</font>'#10#13+
	      '</p>'#10#13;
      end else t1:=0;
      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	    'style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(100+t1)+'px; HEIGHT: 211px"'#10#13+
      'height="35" alt="Cam 1" src="Image1" width="27" border="4">'#10#13;
      if NbCamera>1 then
      begin
	      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: 319px; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(100+t1)+'px; HEIGHT: 211px"'#10#13+
	      'height="35" alt="Cam 2" src="Image2" width="27" border="4">'#10#13;
      end;
      if NbCamera>2 then
      begin
        if NbCamera=4 then u1:= 40 else u1:= 180;
	      u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: '+inttostr(u1)+'; WIDTH: 259px; POSITION: absolute; TOP: '+inttostr(330+t1)+'px; HEIGHT: 211px"'#10#13+
	      'height="35" alt="Cam 3" src="Image3" width="27" border="4">'#10#13;
      end;
      if NbCamera=4 then
      begin
	    u:=u+'<p align="center">&nbsp;</p><img'#10#13+
	      'style="Z-INDEX: 101; LEFT: 319px; WIDTH: 259px; POSITION: absolute; TOP: 260px; HEIGHT: '+inttostr(330+t1)+'px"'#10#13+
	      'height="35" alt="Cam 4" src="Image4" width="27" border="4">'#10#13;
      end;
      u:=u+'</body>'#10#13+
      '</html>

Si il y a une possibilité, merci de me venir en aide.

@+,

Cincap

Code:

1
2
3
4
5
var TabImages=document.images;
IL=TabImages.length
for (i=0;i<IL;i++){
TabImages[i].src=TabImages[i].split('?')[0]+new date()
}

19/03/2008, 12h10
cincap

Très rapide !
@ SpaceFrog, j'étais en train de lire tes réponses à ce sujet pour d'autres questions sur le forum.

Ma page est générée en Delphi et je ne vois pas ou insérer ta proposition.

Je suppose que c'est dans la partie Html mais ou, si oui, je dois alors enlever :
Code:

1 2 '<META http-equiv="Refresh" content="'+inttostr(Ed_refresh.Value)+'">'#10#13+
Sinon il y aurait conflit.

Merci,

@+,

Cincap
19/03/2008, 13h14
SpaceFrog

ce script serait à mettre entre des balses script dans une fonction lancée dasn un setInterval ...
19/03/2008, 14h00
cincap

Bon je vais essayer !

Merci à tous,

@+,

Cincap
19/03/2008, 14h44
SpaceFrog

heu oui il faut enlever la balise meta refresh ....

Pas de solution !

Bonsoir à toutes et à tous,

Je n'ai pas sut adapter le code de SpaceFrog au code de mon 1er topic.
Code:

1 2 3 4 5 6 7 8 9 10 11 '<script type="text/javascript">'#10#13+ 'function Launch()'#10#13+ '{var TabImages=document.images'#10#13+ 'IL=TabImages.length'#10#13+ 'for (i=0;i<IL;i++){'#10#13+ 'TabImages[i].src=TabImages[i].split('?')[0]+new date()'#10#13+ '}'#10#13+ '</script>'#10#13+ <body onload="Launch()" >
Après plusieurs essais, je conserve par conséquent le refresh de toute la page.

Merci à tous,

@+,

Cincap

20/03/2008, 08h48
SpaceFrog

Tu as juste oublié le setInterval

Code:

<body onload="setInterval(Launch(),5000)" >

[edit] Désolé pour l'oubli de la parethèse fermante [édit] :oops::oops:
20/03/2008, 10h41
cincap

Décidément tu es le seul à répondre
Bonjour à toutes et à tous,

@ SpaceFrog, merci à toi pour tes précieux conseils.

Je note bien mon erreur, mais comme ce code Html est créé dynamiquement, ce n'est pas facile d'autant que le refresh est conditionné par ce code qui est relatif au composant sur ma fiche Delphi.
Code:

1 2 3 inttostr(Ed_refresh.Value)
Je vais tester !

@+,

Cincap

Test

Voila,

Une fois le code utilisé, IE7 m'affiche "il existe des erreurs"

Voici le code Htm :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{
 
var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
TabImages[i].src=TabImages[i].split("?")[0]+new date()
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(Launch(),5000" ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>VIDEO SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Pas évident !

@+,

Cincap

20/03/2008, 11h02
SpaceFrog
ta balise image est un peu curieuse ...
Code:

1 2 <img style="z-index: 101; left: 40px; width: 259px; position: absolute; top: 100px; height: 211px;border: solid 4px;" alt="Caméra 1" src="Image1" />
il manque surtout la parenthèse fermante de setInterval

Code:

onload="setInterval(Launch(),5000)"

et si ça ne marche pas essye

Code:

onload="setInterval(fcuntion(){Launch()},5000)"

il y a déjà un mieux

1ère solution = erreur

2ième solution = ok au démarrage de la page puis erreur après 5000 (compteur)

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
TabImages[i].src=TabImages[i].split('?')[0]+new date()
 
}
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)" ms_positioning="gridlayout" leftMargin=0">
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Sinon c'est vrai que c'est un peu particulier de programmer cette page, car pour indiquer ceci dans mon programme split('?') je dois écrire split(' '?' ').

Le compteur à l'air de fonctionner cette fois. :lol:

@+

Code:

1
2
3
4
5
6
7
for (i=0;i<IL;i++){
 if(TabImages[i].src.indexOf('?')>-1){
                 TabImages[i].src=TabImages[i].split('?')[0]+new Date()
                  }
  else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}

arf Date et pas date ...

Il existe des erreurs

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
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
if(TabImages[i].src.indexOf('?')>-1){
 
TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 
}
 
else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)"  ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE </FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Pourtant, le code à l'air correct, à n'y rien comprendre

il manque la balsie de fermeture de la focntion:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
		if(TabImages[i].src.indexOf('?')>-1){
 			TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 			}
 
		else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 }
 }
</script>

Tu as raison, après test

1) pas d'erreur à l'éxécution,
2) après 5000, refresh uniquement de l'image, c'est super
3) après 5000, Erreur.

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
 
<html>
 
<head>
 
<title>SURVEILLANCE</title>
 
<script type="text/javascript">
 
function Launch()
 
{var TabImages=document.images
 
IL=TabImages.length
 
for (i=0;i<IL;i++){
 
if(TabImages[i].src.indexOf('?')>-1){
 
TabImages[i].src=TabImages[i].split('?')[0]+new Date()
 
}
 
else { TabImages[i].src= TabImages[i].src+'?'+new Date() }
 
}
 
}
 
</script>
 
</head>
 
<BODY onload="setInterval(function(){Launch()},5000)"  ms_positioning="gridlayout" leftMargin=0>
 
<p align="center"><font color="#FFFF00"><b><i><FONT face="Alien Encounters" size=6>SURVEILLANCE</FONT>&nbsp;</i></b></font>
 
&nbsp;</p>
 
<p align="center">&nbsp;</p><img
 
style="Z-INDEX: 101; LEFT: 40px; WIDTH: 259px; POSITION: absolute; TOP: 100px; HEIGHT: 211px"
 
height="35" alt="Caméra 1" src="Image1" width="27" border="4">
 
</body>
 
</html>

Au fait le temps de 5000 peut t'il être remplacé par :

Code:

1
2
 
inttostr(Ed_refresh.Value)

Merci de ta patience,

@+,

Cincap

pffff je suis trop préssé d'aler en week end ...
encore une erreur d'innatention de ma part ... desole ...
j'ai oublié un .src
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> function Launch() {var TabImages=document.images IL=TabImages.length for (i=0;i<IL;i++){ if(TabImages[i].src.indexOf('?')>-1){ TabImages[i].src=TabImages[i].src.split('?')[0]+new Date() } else { TabImages[i].src= TabImages[i].src+'?'+new Date() } } } </script>
pour ce qui est de remplace 5000 par inttostr(Ed_refresh.Value)

il vient d'ou ton inttostr(Ed_refresh.Value) ?

20/03/2008, 13h34
cincap

Déjà merci pour t'occuper de moi.

Comme ce code Htm est généré en Delphi, sur ma fiche se trouve un timer réglé à 10s et un TSpinedit (composant) qui se nomme "Ed_refresh.Value" qui permet de choisir de 1s à 30s.

C'est ce temps de 10s qui était utilisé pour le refresh de la page.

Ce serait une bonne chôse de l'adapter au new code pour ne pas imposer le temps unique de 5s.

Je viens d'essayer ta proposition, et au démarrage c'est ok puis après 5s, c'est ok puis après 5s, je n'ai plus l'image.

Pas évident, avant de poster j'avais déjà pas mal galéré.

Seul le refresh de toute la page fonctionnait correctement.

Ne te casse pas trop la tête avant ton week-end.

@+,

Cincap
20/03/2008, 13h36
SpaceFrog

heu faut virer le refresh ...
20/03/2008, 13h39
cincap

Il était viré ! c'était pour te donner la configuration relatée dans mon 1er topic8-)
20/03/2008, 13h44
SpaceFrog

arf je vos le problème ...
laisse moi une dizaine de minutes ...
20/03/2008, 14h03
cincap

Si cela peut t'aider, dans le cache j'ai constaté que image1 se nommait

image1?date etc....

D'ou l'erreur.

j'ai vraiment besoin de vacances :oops::oops::oops:

Code:

1
2
3
4
5
6
7
8
9
function Launch()
 
{var TabImages=document.images;
 IL=TabImages.length;
 
for (i=0;i<IL;i++){
	TabImages[i].src=TabImages[i].src.split("?")[0]+"?"+new Date();
	 	}
}

20/03/2008, 14h30
cincap
Ok c'est bon mais mon cache se remplit toutes les 5 secondes d'images.

Pour le réglage du temps avec ma fiche, je pensais ajouter une var delay

Et dans le onload :
Code:

1 2 3 4 var delay='+inttostr(Ed_refresh.Value)+' <BODY onload="setInterval(function(){Launch()},delay*1000)"
Je ferai des essais tantôt ainsi qu'avec deux caméras.

Je te remercie encore et bon Week-end.

@+,

Cincap
20/03/2008, 14h35
SpaceFrog

oui ça me parait pas mal le coup de la varible de rafraichissement...
20/03/2008, 15h00
cincap

Pour le test avec 2 caméras, c'est ok

Pour la variable comme suggérée cela ne va pas (erreur).

A ta meilleure convenance et après ton Week-end si tu pouvais regarder à nouveau ce code, cela me ferait plaisir.

@+,

Cincap
20/03/2008, 15h03
SpaceFrog
ça

Code:

var delay='+inttostr(Ed_refresh.Value)+'

fut le mettre là :
Code:

1 2 3 4 5 6 7 <title>SURVEILLANCE</title> <script type="text/javascript"> var delay='+inttostr(Ed_refresh.Value)+' function Launch() {var TabImages=document.images ...
Mais je ne suis pas sur de la syntaxe, je ne sais pas comment passer un truc à javascirpt depuis Delphi

En fait la syntaxe était bonne, sauf que ma variable était placée dans la fonction :oops:

Sinon voici le code en Delphi c'est à peu près pareil sauf la syntaxe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 '<script type="text/javascript">'#10#13+ 'var delay='+inttostr(Ed_refresh.Value)+';'#10#13+ 'function Launch()'#10#13+ '{var TabImages=document.images;'#10#13+ 'IL=TabImages.length;'#10#13+ 'for (i=0;i<IL;i++){'#10#13+ 'TabImages[i].src=TabImages[i].src.split(''?'')[0]+"?"+new Date();'#10#13+ '}'#10#13+ '}'#10#13+ '</script>'#10#13+ '</head>'#10#13+ '<BODY onload="setInterval(function(){Launch()},delay*1000)" ms_positioning="gridlayout" leftMargin=0 background="http://users.skynet.be/jean-marie.capellen/images/fond_celtic.JPG">'#10#13+
Encore merci pour ton savoir, pour le cache, je pense qu'il y a une astuce avec Meta-no cache, je vais regarder.

@+,

Cincap

20/03/2008, 15h24
SpaceFrog

non le fait de mettre un new Date àpèrs le scr de l'image contourne le cache ...
le sbalises meta pragma ne sont pas fiables ...
20/03/2008, 15h28
cincap
Je viens de faire le test avec :
Code:

1 2 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
et les images se chargent quand même.

Enfin on a fait un grand pas grâce à toi et je vais rester sur ce petit hic.

Sinon avec le refresh de la page une seule image par caméra était dans le cache.

Voila je pense qu'on est allé au bout du problème.

Grand merci à toi,

@+,

Cincap
20/03/2008, 15h35
SpaceFrog

Pour moi avec ou sans ma balise meta cela ne change rien ...
le fait d'envoyer un src avec à chaque fois un parmètre différent oblige le navigateur à taper direct le serveur ...
si cel ne focntionne pas c'est que tu dois avoir un proxy ou un truc du genre masi à priori cela devrait fonctionner ...
20/03/2008, 16h02
cincap

Je viens de vérifier, avec l'ancien code et le refresh de la page, je n'ai que l'image de la caméra en fonction dans le cache et elle ne s'additionne pas.

Avec le new code et le refresh de l'image, j'ai une image de la caméra en fonction dans le cache et elle s'additionne tant que je suis en conexion.

Et cela malgré la balise.

J'ai IE7 il y a surement une raison, je ne vais pas trop m'en faire car c'est au cas ou depuis l'étranger je devrai me connecter pour vérifier mes caméras.

Sinon grâce à toi, il n'y a plus de scintillement de la page toute les 10s dans le cas bien entendu d'une page avec une image en background au lieu d'une couleur.

@+,

Cincap
20/03/2008, 16h05
SpaceFrog

sinon tu peux t'inspirer de ça :
http://www.developpez.net/forums/sho...d.php?t=499793

là pour le coup avec un appel ajax