Discussion :

[Casio]

Salutations,

Autant j'arrive à debugger du PHP et du CSS un peu, autant je n'ai jamais compris le JS correctement.

J'ai le code suivant qui reload des imgs toutes les secondes et qui marche très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script type="text/javascript" async>
	function ReloadImage(){
		var now=new Date();
		document.getElementById('CamIP1').src='http://monurl1' + now; // Camera 1
		document.getElementById('CamIP2').src='http://monurl2' + now; // Camera 2
		document.getElementById('CamIP3').src='monurl3' + now; // Camera 3
	}
	setInterval(ReloadImage,1000); // 1000=1 Secondes
</script>

Autant, je n'ai jamais réussi à faire fonctionner cette partie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
		document.getElementById(id).onload = function() {
			// Image ready
		};
		document.getElementById(id).onerror = function () {
			// Chargement image rate
			document.getElementById(id).src='Cam-Wait.jpg';
		};

Il n'y à pas de moyen en JS de faire en sorte qu'un controle d'erreur fonctionne pour TOUS les id ?

Merci de votre aide ...

[javatwister]

Bonjour,

Il faudrait un contexte...
Mais quelque chose comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
document.querySelectorAll("img").forEach(im=>{
   im.onload=console.log(im.src + " est valide.");
   im.onerror=()=>{throw new Error("Adresse inconnue")}
})

(Le gestionnaire error est dur à manier.)

[Casio]

Merci,

cela SEMBLE fonctionner, mais comment afficher une image (Cam-Wait.jpg) en cas d'erreur de chargement des img ?

[javatwister]

Encore une fois, sans contexte, pas de solution précise.

[Casio]

Tout est déjà donné,
ce script ré-actualise juste des imgs toutes les secondes.

Code HTML :

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
<!-- Camera 1 !-->
<img src="Cam-Wait.jpg" width="320" height="240" id="CamIP1" class="cam" alt="Site de depot Parisien en direct !" title="Site de depot Parisien en direct !" />
 
<!-- Camera 2 !-->
<img src="Cam-Wait.jpg" id="CamIP2" width="320" height="240" class="cam" alt="Atelier Parisien en direct !" title="Atelier Parisien en direct !" />
 
<br />
 
(...)
 
<!-- Data cameras !-->
<script type="text/javascript" async>
        function ReloadImage(){
                var now=new Date();
                document.getElementById('CamIP1').src='URL-1' + now; // Camera 1
                document.getElementById('CamIP2').src='URL-2' + now; // Camera 2
 
        setInterval(ReloadImage,1000); // En millisecondes : 1000 = 1 Seconde
</script>

[javatwister]

D'après ce que tu donnes, je dirais:

Code javascript :

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
 
// tableau des images non chargées
const t=[];
// demande d'actualisation
setInterval(()=>{
// pour chaque balise image
	document.querySelectorAll(".cam").forEach((im,i)=>{
// si le tableau ne contient pas l'image
		if(!t.includes(im)){
// on lui donne n'adresse correspondant à son indice+1 et on l'actualise avec Date.now()
			im.src="urlimages"+(i+1)+".jpg?"+Date.now();
 		};
// si l'image n'existe pas, on l'ajoute au tableau et on demande l'image de rechange
		im.onerror=()=>{t.push(im);im.src="Cam-Wait.jpg";}
	})
},1000)

Mais je ne suis sûr de rien...