rafraichir plusieurs images en meme temps

rafraichir plusieurs images en meme temps - HTML/CSS - Programmation

Marsh Posté le 04-09-2014 à 22:42:42    

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


 
Merci pour votre aide

Reply

Marsh Posté le 04-09-2014 à 22:42:42   

Reply

Marsh Posté le 05-09-2014 à 13:49:30    

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
Reply

Marsh Posté le 05-09-2014 à 14:50:20    

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 :
  1. <body>
  2. <p><img src="http://mon ip:port/snapshot.cgi" id="img" alt="Mauvaise config..." /></p>
  3. <p><img src="http://mon ip2:port/snapshot.cgi" id="img" alt="Mauvaise config..." /></p>
  4. <p><img src="http://mon ip3:port/snapshot.cgi" id="img" alt="Mauvaise config..." /></p>
  5. <p><img src="http://mon ip4:port/snapshot.cgi" id="img" alt="Mauvaise config..." /></p>
  6. <p><img src="http://mon ip5:port/snapshot.cgi" id="img" alt="Mauvaise config..." /></p>
  7. </body>


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

Reply

Marsh Posté le 05-09-2014 à 16:30:28    

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
Reply

Marsh Posté le 05-09-2014 à 17:02:22    

David Boring a écrit :

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


 
bonjour David Boring
 
merci pour tes explications :D  
 
 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.

Reply

Marsh Posté le 05-09-2014 à 17:22:56    

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

Code :
  1. var loadImage = function() {
  2.  var images = document.querySelectorAll( '.img' );
  3.  for (var image of images) {
  4.   ton code…
  5.  }
  6. }


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

Marsh Posté le 05-09-2014 à 22:45:33    

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

Code :
  1. for (var image of images) {


Message cité 1 fois
Reply

Marsh Posté le 06-09-2014 à 09:21:06    

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

Reply

Marsh Posté le 06-09-2014 à 11:13:06    

reinruof77 a écrit :

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

Code :
  1. for (var image of images) {




Code :
  1. for (var image in images) {



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

Marsh Posté le 06-09-2014 à 12:32:28    

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
Reply

Marsh Posté le 06-09-2014 à 12:32:28   

Reply

Marsh Posté le 08-09-2014 à 09:53:48    

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 :
  1. var loadImage = function() {
  2.    var url = new Array();
  3.    var url[0] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
  4.    var url[1] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
  5.    var url[2] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
  6.    var url[3] = 'http://mon ip:port/snapshot.cgi?'+Math.random();
  7.    var images = new Array();
  8.    var images = document.getElementsByClassName('img');
  9.    for(var i = 0; i <images.length; i++) {
  10.       var img = new Image();
  11.       img.src = url[i];
  12.       addEvent(img, 'load', function() {
  13.          updateImage(images[i], url[i]);
  14.          window.setTimeout(loadImage, 1000);
  15.       });
  16.    }
  17. }

Reply

Marsh Posté le 08-09-2014 à 23:10:10    

David Boring a écrit :

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


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

Marsh Posté le 09-09-2014 à 12:05:00    

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

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed