Variable générique sur fonction ?

Version imprimable

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:

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:

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

Bonjour,

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

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.)

22/04/2020, 01h30
Casio

Merci,

cela SEMBLE fonctionner, mais comment afficher une image (Cam-Wait.jpg) en cas d'erreur de chargement des img ?
22/04/2020, 01h51
javatwister

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

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

Code:

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>

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

Code:

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