5

我试图通过更改 DOM 对象的源每 100 毫秒从文件中“获取”一个图像。我可以看到 GET 调用确实每 100 毫秒返回正确的图像，但实际的图像显示每秒只更新一次。这是我完成工作的 JavaScript 代码：

<img id="videoDisplay" style="width:800; height:600"/>

<script type="text/javascript">
  function videoDataPoll(filename) {
    setTimeout(function() {
      document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime();
      videoDataPoll(filename);
    }, 100);
  }
</script>

更新：将功能更改为使用预加载，如下所示：

<canvas id="videoDisplay" style="width:800; height:600"/>

<script type="text/javascript">
  var x=0, y=0;
  var canvas, context, img;
  function videoDataPoll() {
    var filename = getFilename();   
    canvas = document.getElementById("videoDisplay");
    context = canvas.getContext("2d");
    img = new Image();
    img.onload = function() {
      context.drawImage(img, x, y);
      setTimeout("videoDataPoll()", 100);
    }
    img.src = filename + "?random=" + (new Date()).getTime();
  }
<script>

仍然以相同的速度更新（实际上是每 5 秒，而不是最初所说的 1 秒）。因此，对于每 50 个获取请求（10/秒，持续 5 秒），元素仅更新一次。

另一个重要说明：第二个解决方案在我的本地主机上完美运行，我遇到的问题是当我在远程主机上运行相同的网页时。

4

1 回答 1

2

我建议对图像使用 onload 处理程序而不是固定超时：

  function videoDataPoll(filename) {
      document.getElementById("videoDisplay").src = filename + "?random="+(new Date()).getTime();
  }

  document.getElementById("videoDisplay").onload = videoDataPoll;
  videoDataPoll(filename);

在这种情况下，您需要从函数内部获取文件名，而不是将其作为参数传递。

于 2013-05-14T14:05:53.843 回答