Actualisation périodique des images sur une page

Question

Je suis en train de créer une page pour afficher un tas d'images de webcam et les mettre à jour périodiquement afin que la page puisse être utilisée pour une surveillance d'un coup d'œil. Cependant, j'ai des problèmes pour faire fonctionner le rechargement périodique. Mon code ressemble à:

<div class='cameras'> 
    <div class='camera'> 
     <h4>Desk</h4> 
     <img height='240' src='http://somehost/cameras/cam0/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
     <h4>Main Room</h4> 
     <img height='240' src='http://somehost/cameras/cam1/lastsnap.jpg' width='320'> 
    </div> 
    <div class='camera'> 
     <h4>Studio</h4> 
     <img height='240' src='http://somehost/cameras/cam2/lastsnap.jpg' width='320'> 
    </div> 
    </div> 

Idéalement, je voudrais obtenir ces choses Rechargement toutes les deux secondes de leurs URL spécifiées sans avoir à générer JS individuels pour chaque caméra. J'ai jQuery en cours d'utilisation pour quelques autres morceaux, donc coller à ce serait génial - là encore, une simple solution JS est très bien aussi.

Des idées, StackOverflow JS Gods?

Answer 1

D'accord, résolu ceci:

function refreshCameras() { 
    $('.camera img').attr('src', function(i, old) { return old.replace(/\?.+/,"?i=" + (Math.random()*1000)); }); 
    setTimeout(refreshCameras, 1000); 
} 
function refreshCamerasFirst() { 
    $('.camera img').attr('src', function(i, old) { return old + "?i=" + (Math.random()*1000); }); 
    setTimeout(refreshCameras, 1000); 
} 
$(function() { 
    setTimeout(refreshCamerasFirst, 1000); 
}); 

Prendra tous les éléments img dans une classe « caméra », et les rafraîchir à chaque seconde avec cache-busting par un nombre aléatoire ajouté à l'URL, ce qui est changé tous les recharger sans rendre l'URL obscène en utilisant une expression rationnelle pour remplacer le nombre existant.

Answer 2

Essayez la réécriture balise meta sur vous page

<meta http-equiv="Refresh" content="2; URL=yourpage.php"> 

Il fonctionne cool avec le text.Checkout avec des images

Answer 3

Si vous voulez rafraîchir la page dans une durée déterminée, vous pouvez le faire en html aussi

Ajouter cette balise à votre page balise head

<meta http-equiv="refresh" content="1"> 

ici c ontenu est la durée en secondes Reportez ce

http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm

Answer 4

Générer des sources d'images aux images [intervalles de temps réguliers]

var img = []; //just an image source. you can write your own code for image source 

img[0] ='http://site.com/pics/pic.jpg'; 
img[1] ='http://site.com/pics/pic1.jpg'; 
img[2] ='http://site.com/pics/pic2.jpg'; 
img[3] ='http://site.com/pics/pic3.jpg'; 

$(function() { 
    $.each(img, function(i, val) { 
     var images = new Image(); 
     images.src = val; //preloading images for my example purpose 
    }); 
    function reload() { 
     $('img.alter').each(function() { //generate a url for image source. 
      var src = img[Math.floor(Math.random() * img.length)]; 
      $(this).attr('src',src); 
     }); 
    } 
    setInterval(reload , 5000) 
}); 

Test it here

PS: cette technique ne nécessite pas le rechargement de la page entière