Question

我正在使用以下代码

<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页面。那么这个文件的任何帮助??

Answer 1

您的代码无效，因为从未使用newImage。 src newImage正确更改，实际上新图片将成功加载，但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）
不需要任何元素的内联事件处理程序

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

Answer 3

据说在http://snipplr.com/view/17272/single-line-image-refresh/

处有一个单线解决方案

至少需要一点清理，当我复制并粘贴时，我得到了＆lt; img src = - image.jpgâ€id =“reloader”onload = - setTimeout（“document.getElementById（\”reloader \“）.src = \”image.jpg ？\ + new Date（）。getMilliseconds（）â€，5000） - ＆gt;

此版本至少可以减少错误：

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

最外层（onLoad）级别的双引号，在那些内部单打。

不，抱歉，不能让它真正起作用。我正在使用gphoto从相机中获取取景器图像，我希望能够在正在运行的机器上为Apache提供服务。如果我在网页上手动点击重新加载，我会看到图像更改，但它不会在setTimeout间隔发生。如果我最终开始工作，我会编辑它，我保存了URL。

遗漏了？，现在图片不会改变，除非我重新加载页面。

我的报价转换可能有问题。在原版中我认为我看到3个不同的引号符号，他们也使用反引号吗？ â€，â€™和â€。 charset应该是页面源的utf-8，但某些东西破坏了。至少我的Firefox显示垃圾，我试图猜测它意味着什么。

以HTML格式自动刷新图像

3 个答案: