rafraichir plusieurs images en meme temps

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : rafraichir plusieurs images en meme temps

reinruof77

bonjour a tous

voila j'ai script pour rafraîchir mon image de webcam sur mon site qui fonctionne très bien pour une camera.

j'arrive a ajouté les 4 autres camera

mais je n'arrive pas rafraîchir les images des camera mais je trouve pas la solution .

voici mon script

Code :

2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>test</title>
6. <script type="text/javascript">
7. // l'idée c'est d'afficher l'image quand elle est chargée ...
8. var addEvent = function(object, eventName, callback) {
9. if(object.addEventListener) {
10. object.addEventListener(eventName, callback, false);
11. } else if(object.attachEvent) {
12. object.attachEvent('on'+eventName, callback);
13. }
14. }
15.
16. var getId = function(id) {
17. return document.getElementById(id);
18. }
19.
20. var updateImage = function(object, url) {
21. object.setAttribute('src', url);
22. }
23.
24. var loadImage = function() {
25. // vive les maths !!
26. var url = 'http://mon ip:port/snapshot.cgi?'+Math.random();
27. var img = new Image();
28. img.src = url;
29. addEvent(img, 'load', function() {
30. updateImage(getId('img'), url);
31. window.setTimeout(loadImage, 1000);
32. });
33. }
34.
35. addEvent(window, 'load', loadImage);
36. </script>
37. </head>
38. <body>
39. <img src="http://mon ip:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
40. </body>
41. </html>

Merci pour votre aide

Publicité

MaybeEijOrNot

but someone at least

Salut,

Ben là tu ne prends en charge qu'une caméra, il est où le code pour 4 caméras?

Message cité 1 fois

reinruof77

MaybeEijOrNot a écrit :

Salut,

Ben là tu ne prends en charge qu'une caméra, il est où le code pour 4 caméras?

bonjour MaybeEijOrNot et merci de me répondre

tout le problème est la c'est que je ne sait pas ou les mettre dans mon code pour que le script les prennent en compte . :pt1cable:

J'ai essayer de les mettre a la fin elle y était mais plus de rafraîchissement sur aune cam.

Code :

<body>
<img src="http://mon ip:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
<img src="http://mon ip2:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
<img src="http://mon ip3:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
<img src="http://mon ip4:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
<img src="http://mon ip5:port/snapshot.cgi" id="img" alt="Mauvaise config..." />
</body>

c'est pour cela que je vient vous demander de l'aide.

David Boring

l'ID est unique. À partir du moment où il fait pour une, il ne vas pas continuer.
tu dois cibler tes éléments avec une classe et employer document.querySelectorAll
https://developer.mozilla.org/fr/do [...] electorAll
Attention, cela ne fonctionne pas avec les anciennes version d'IE, mais j'imagine que tu es à jour

Message cité 1 fois

reinruof77

David Boring a écrit :

bonjour David Boring

merci pour tes explications

mais je ne comprend pas trés bien aurait tu un exemple a me montrer? :ange:

je me suis lancer la dedans sans une grande connaissance :??:

Merci en tout cas d'avoir pris le temps de me répondre.

David Boring

Tu boucles pour toutes tes images (avec une classe .img) ton code pour remplacer l'url

Code :

var loadImage = function() {
 var images = document.querySelectorAll( '.img' );
 for (var image of images) {
  ton code…
 }
}

Message édité par David Boring le 05-09-2014 à 17:23:26

reinruof77

Merci David
Mais la ça ne fonctionne plus du tout :lol:
et j'ai une erreur sur cette ligne

Code :

for (var image of images) {

Message cité 1 fois

David Boring

Sinon, il y a une solution beaucoup plus simple, tu peux simplement rafraichir ta page automatiquement.
<meta http-equiv="refresh" content="600">
à mettre dans le head, 600 secondes ici entre chaque rafraichissement

SICKofitALL

misanthrope

reinruof77 a écrit :

Merci David
Mais la ça ne fonctionne plus du tout :lol:
et j'ai une erreur sur cette ligne

Code :

for (var image of images) {

Code :

for (var image in images) {

---------------
We deserve everything that's coming...

David Boring

En fait, mon code n'était pas mauvais, mais il ne fait pas la même chose que 'in' mais surtout la prise en charge est faible.
https://developer.mozilla.org/en-US [...] s/for...of
https://developer.mozilla.org/en-US [...] patibility
Autant employer arr.forEach(callback[, thisArg]) qui a un meilleur support
https://developer.mozilla.org/en-US [...] ay/forEach

Message cité 1 fois

Publicité

MaybeEijOrNot

but someone at least

Comme dit, il suffit de boucler sur tes images, à la place d'utiliser une id, mets une classe "img" et avec getElementsByClassName (ou un truc dans le genre) tu appelles la fonction "updateImage(getId('img'), url);" avec le lien qui va bien :

Quelque chose comme (je n'ai pas vérifié mais ça devrait être pas mal) :

Code :

var loadImage = function() {
var url = new Array();
var url[0] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
var url[1] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
var url[2] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
var url[3] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
var images = new Array();
var images = document.getElementsByClassName('img');
for(var i = 0; i <images.length; i++) {
var img = new Image();
img.src = url[i];
addEvent(img, 'load', function() {
updateImage(images[i], url[i]);
window.setTimeout(loadImage, 1000);
});
}
}

SICKofitALL

misanthrope

David Boring a écrit :

:jap: j'avais zappé cette syntaxe !
Dommage que ca soit supporté que par Gecko et Webkit (ce qui est déjà pas mal en soit).
Sinon, forEach en effet, car plus fonctionnel.

---------------
We deserve everything that's coming...

MaybeEijOrNot

but someone at least

De ce que j'avais retenu, rien n'est plus efficace qu'une boucle for classique.

FORUM HardWare.fr

Programmation

HTML/CSS

rafraichir plusieurs images en meme temps

Sujets relatifs
imprimer plusieurs tickets base excel	[SGBD/SQL] Count distinct sur plusieurs champs a la fois
Uploader plusieurs fichier avec php	Plusieurs COUNT même table
javascript, je n'arrive pas a faire fonctionner ma galerie d'images	Supprimer plusieurs enregistrements et remplacer par un seul
Résumer plusieurs lignes en une seule	temps d'une Entrée Sortie
Ouvrir plusieurs fichiers en vba	je voudrais fusionner les cellules du tableau de mon emploi du temps
Plus de sujets relatifs à : rafraichir plusieurs images en meme temps

Page générée en 0.083 secondes