自动刷新 HTML 中的图像答案

【问题标题】：Auto refresh images in HTML自动刷新 HTML 中的图像
【发布时间】：2014-01-19 14:20:54
【问题描述】：

我正在使用以下代码

<html>
<script>

    var newImage = new Image();

function updateImage() {
    if(newImage.complete) {
           newImage.src = document.getElementById("img").src;
           var temp = newImage.src;
           document.getElementById("img").src = newImage.src;
           newImage = new Image();
           newImage.src = temp+"?" + new Date().getTime();

}
setTimeout(updateImage, 1000);
};
</script>

<body onload="updateImage();">
<img id="img" src="http://cameraURI" style="position:absolute;top:0;left:0;height:50%;width:50%"/>
</body>
</html>

但是我的图像没有得到刷新。请注意，出于我的应用目的，我不能在脚本中使用任何 url。

我知道我需要删除newImage.src = document.getElementById("img").src; 并需要将function updateImage() 放在同一个文件中，但如果我这样做，我会收到document.getElementById(" ").src is set to NULL 的错误并且我不能使用自动刷新HTML 页面。那么这个文件有什么帮助吗？？

【问题讨论】：

改变元素id而不是使用img
@SridharR：我试过还是同样的问题..
在头部添加标签，紧跟在 html 之后
@caramba: 添加后没有错误，但静止图像没有刷新..
newImage 正确加载新图像，但从未使用过。请参阅我的答案以获取更多解释和有效的简单代码。

标签： javascript html

【解决方案1】：

您的代码不起作用，因为从未使用过newImage。 newImage 的 src 正确更改，实际上新图像会成功加载，但 newImage 永远不会插入到 HTML 中。

这是做你想做的最简单的方法：

window.onload = function() {
    var image = document.getElementById("img");

    function updateImage() {
        image.src = image.src.split("?")[0] + "?" + new Date().getTime();
    }

    setInterval(updateImage, 1000);
}

这段代码

使用setInterval() 而不是setTimeout()，因为这是一个重复的任务
直接更改图像的 src 属性 - 不需要额外的变量（即 newImage）
不需要任何元素的内联事件处理程序

【讨论】：

移动 "var image = document.getElementById("img");"在 window.onload() 中，因为在执行 javascript 时可能尚未定义 ID 为“img”的元素，通常是在 HTML . 中
@François 谢谢！很好的修正。（我将所有代码移至window.onload()）

【解决方案2】：

试试这个

function refresh(node)
{
   var times = 3000; // gap in Milli Seconds;

   (function startRefresh()
   {
      var address;
      if(node.src.indexOf('?')>-1)
       address = node.src.split('?')[0];
      else 
       address = node.src;
      node.src = address+"?time="+new Date().getTime();

      setTimeout(startRefresh,times);
   })();

}

window.onload = function()
{
  var node = document.getElementById('img');
  refresh(node);
  // you can refresh as many images you want just repeat above steps
}

【讨论】：

【解决方案3】：

http://snipplr.com/view/17272/single-line-image-refresh/ 据说有一个单行解决方案

至少需要一点清理，当我复制和粘贴时，我得到

这个版本至少给出的错误更少：

<img src="test2.jpg" id="reloader" onLoad="setTimeout(document.getElementById('reloader').src='test2.jpg' ? +new Date().getMilliseconds(),5000)"/>

双引号在最外层 (onLoad) 层，单引号在里面。

不，抱歉，不能让它真正起作用。我正在使用 gphoto 从相机获取取景器图像，我希望在运行的机器上通过 Apache 提供该图像。如果我在网页上手动点击重新加载，我会看到图像发生变化，但它不会在 setTimeout 间隔内发生。如果我最终让它工作，我会编辑这个，我保存了 URL。

省略了？，现在除了我重新加载页面时，图像不会改变。

我的引用转换可能有问题。在原文中，我想我看到了 3 个不同的引号符号，它们也使用反引号吗？ â€、â€™ 和 \â€™。页面源的字符集应该是 utf-8，但是某处出现了问题。至少我的 Firefox 显示垃圾，我试图猜测它的含义。

【讨论】：

【解决方案4】：

这将修复上面 Alan Corey 消息中的语法（感谢 Alan！）...我对其进行了测试，效果很好！

<img src="test2.jpg" id="reloader" onLoad="setTimeout( () => { document.getElementById('reloader').src='test2.jpg' + '?' + new Date().getMilliseconds() } ,5000)" />

【讨论】：