Refreshing images on a page periodically

I'm building a page to display a bunch of webcam images and update them periodically so that the page can be used for at-a-glance monitoring. However, I'm having issues getting the periodic reload working. My code looks something like:

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

Ideally I'd like to get these things reloading every couple of seconds from their specified URLs without having to generate individual JS for each c开发者_Go百科amera. I've got jQuery in use for a few other bits and pieces, so sticking to that would be great - then again, a plain JS solution is fine too.

Any ideas, StackOverflow JS Gods?

Okay, solved this:

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);
});

Will take all img elements in a "camera" class, and refresh them every second with cache-busting via a random number added to the URL, which is changed every reload without making the URL obscenely long using a regexp to replace the existing number.

Generate image sources to the images [for regular intervals of time]

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 :this technique doesn't require the reloading of entire page

Try rewriting meta tag on you page as

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

It works cool with the text.Checkout with images

If you want to refresh the page in a specified duration you can do that in html also

Add this tag to your page head tag

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

here content is the duration in seconds Refer this

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