定期刷新页面上的图像

发布于 2024-09-26 23:34:08 字数 844 浏览 6 评论 0原文

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

<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 大神们，有什么想法吗？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风和你 2024-10-03 23:34:08

好的，解决了这个问题：

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 过长替换现有号码。

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.

回复收藏 0 原文

我的奇迹 2024-10-03 23:34:08

尝试在页面上重写元标记，因为

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

它与文本配合使用很酷。用图像结账

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

回复收藏 0 原文

零度℉ 2024-10-03 23:34:08

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

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

在此处测试

< strong>PS：该技术不需要重新加载整个页面

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

回复收藏 0 原文