Refreshing images on a page periodically

Question

Hi,

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

Answer 1

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.

Answer 2

Hi,

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

Answer 3

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

Answer 4

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