Rafraîchir une image toute les seconde avec préchargement.

Version imprimable

Bonsoir à tous :D !

J'ai une WebCam branché en permanence sur mon vivarium avec ma tarentule...
Et un petit programme maison en python, qui prend une image toute les seconde, et l'envoi sur mon site... temp.jpg

Sur un page HTML il y a une image.
Cette image est rafraichie toute les secondes par du Javascript.

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>---</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <img src='./Cam/temp.jpg' id='imageCam' /> <script type="text/javascript">  </script> </body> </html>
Mon problème est que les images peuvent parfois être un peu lourde, et je ne voudrais pas les voir se charger ; un peu comme certaine caméra de surveillance image après image.

J'ai cherché, et j'ai trouvé des bouts de code...
Mais je n'arrive pas à les adapter :( !

Est-il possible de faire ça ?
Quelqu'un à une idée ?

Merci d'avance :ccool: !
Bonne fin de nuit.

08/10/2010, 13h11
javatwister

l'idée ce serait peut-être que tu surveilles les paramètres height et width; du coup, quand la taille de l'image en cours correspond à ça, elle est chargée et entièrement visible;
après, il faut que tu choisisses entre la rapidité du diapo (en théorie, 1 par seconde) et l'affichage propre (forcément beaucoup plus lent);
guette le chargement de l'image 2 et quand c'est ok, mets son src à la place de l'image 1, etc.

Bref, plutôt qu'un direct, tu vas avoir une provision d'images que l'utilisateur pourra si possible activer les unes après les autres;

c'est rigolo ça, un python pour surveiller une tarentule 8-)

Ok, merci à toi javatwister !

J'ai bidouillé un peu, et ça me semble potable, ça ne charge pas trop :) :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>---</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<img src="./cam.jpg" id="imageCam" />
	<script type="text/javascript">
		<!--
			setInterval(rafraichirCam, 500);
 
			function rafraichirCam()
			{
				var imageCam = new Image();
				imageCam.src = "./cam.jpg";
 
				imageCam.onload = function()
				{	
					document.getElementById("imageCam").src = imageCam.src + "?" + Math.random(1);
				}
			}
		//-->
	</script>
</body>
</html>

Et oui, un Python qui surveille une tarentule :mouarf: !

Merci encore :ccool: !