定期刷新页面上的图像

Question

我正在构建一个页面来显示一堆网络摄像头图像并定期更新它们,以便该页面可用于一目了然的监控.但是,我遇到了定期重新加载工作的问题.我的代码看起来像:

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

理想情况下,我希望每隔几秒钟从指定的URL重新加载这些内容,而不必为每个摄像头生成单独的JS.我已经使用了jQuery来处理其他一些零碎的东西,所以坚持下去会很棒 - 然后,一个普通的JS解决方案也很好.

任何想法,StackOverflow JS众神？

Answer 1

好的,解决了这个问题:

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

将在"照相机"类的所有IMG元素,并刷新它们每秒钟通过添加到URL,这是改变每一个重载未做URL猥亵使用长一个正则表达式来取代现存的号码随机数缓存清除.