Javascript HTML中的自动刷新图像_Javascript_Html

Javascript HTML中的自动刷新图像

javascript html

Javascript HTML中的自动刷新图像,javascript,html,Javascript,Html,我正在使用以下代码 <html> <script> var newImage = new Image(); function updateImage() { if(newImage.complete) { newImage.src = document.getElementById("img").src; var temp = newImage.src; document.getElem

我正在使用以下代码

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


var newImage=newImage（）；
函数updateImage（）{
if（newImage.complete）{
newImage.src=document.getElementById（“img”）.src；
var temp=newImage.src；
document.getElementById（“img”）.src=newImage.src；
newImage=新图像（）；
newImage.src=temp+“？”+新日期（）.getTime（）；
}
setTimeout（updateImage，1000）；
};

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

我知道我需要删除

newImage.src=document.getElementById（“img”）.src并需要将函数updateImage（）
放在同一个文件中，但如果这样做，我会在文档时出错。getElementById（“”）.src设置为NULL
，我无法使用自动刷新HTML页面。有关于这个文件的帮助吗？？？
试试这个
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
}

您的代码不起作用，因为从未使用过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
）
不需要任何元素的内联事件处理程序
据说，目前有一种单线解决方案
至少需要一点清理，当我复制和粘贴时

此版本至少提供较少的错误：

最外层（onLoad）级别的双引号，内部的单引号
不，对不起，不能让它真正起作用。我用gphoto从相机上获取取景器图像，我希望它能在运行的机器上通过Apache提供服务。如果我在网页上手动点击reload，我会看到图像发生了变化，但在设置的超时时间间隔内不会发生。如果我最终让它工作，我会编辑这个，我保存了URL
撇开？，现在图像只有在我重新加载页面时才会改变
也许我的引用转换有问题。在原文中，我想我看到了3种不同的引号符号，它们是否也使用了反勾号？â€, â€™, 以及€™.  根据页面源代码，该字符集应该是utf-8，但某处有东西坏了。至少我的Firefox显示了我试图猜测其含义的垃圾信息。
改变元素id，避免使用img@SridharR：我尝试了同样的问题..在头部添加标签，然后html@caramba：添加后无错误，但未刷新静止图像。newImage
正确加载新图像，但从未使用。请参阅我的答案，以了解更多解释和简单代码。将“var image=document.getElementById（“img”）；”移到window.onload（）中，因为在执行javascript时可能尚未定义ID为“img”的元素，通常是在HTML中。@François谢谢！纠正得好。（我将所有代码移到了window.onload（）
）