定期刷新页面上的图像答案

【问题标题】：Refreshing images on a page periodically定期刷新页面上的图像
【发布时间】：2010-10-10 02:49:47
【问题描述】：

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

<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 大神们？

【问题讨论】：

标签： javascript jquery image unobtrusive-javascript

【解决方案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 中的随机数每秒刷新它们，并使用正则表达式替换现有号码。

【讨论】：

【解决方案2】：

为图像生成图像源[定期]

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：这种技术不需要重新加载整个页面

【讨论】：

【解决方案3】：

尝试将页面上的元标记重写为

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

文本很酷。用图片结帐

【讨论】：

【解决方案4】：

如果您想在指定的持续时间内刷新页面，您也可以在 html 中执行此操作

将此标签添加到您的页头标签

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

这里的内容是以秒为单位的持续时间参考这个

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

【讨论】：