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

**Darel** · 08/10/2010, 00h40

Bonsoir à tous

!

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 :

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
<!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">
		<!--
			var imageCam = document.getElementById('imageCam').src;
			setInterval(rafraichirCam, 1000);
 
			function rafraichirCam()
			{
				document.getElementById('imageCam').src = imageCam + "?" + Math.random(1);
			}
		//-->
	</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

!
Bonne fin de nuit.

**javatwister** · 08/10/2010, 13h11

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

**Darel** · 08/10/2010, 13h49

Ok, merci à toi javatwister !

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

:

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

!

Merci encore

!

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

JavaScript

Discussions similaires

Partager

Partager