DOM需要很长时间才能做出反应

我试图通过更改DOM对象的来源，每隔100ms从文件中“获取”一个图像。我可以看到GET调用确实每100ms返回一个正确的图像，但实际的图像显示只更新一次。这里是我的JavaScript代码，做的工作：DOM需要很长时间才能做出反应

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

UPDATE：更改为使用预加载如下功能：

<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秒），该元素只会更新一次。

另一个重要的注意事项：第二种解决方案在我的本地主机上运行良好，我遇到的问题是当我从远程主机运行相同的网页时。

来源

2013-05-14 exxodus7

您必须在显示前预载图像。否则，1是图像加载的时间。您可以使用[此功能]（http://short-tag.info/2013/04/preload-images-with-plain-javascript/）。 – antoox 2013-05-14 13:45:11

+19

第一次调用'videoDataPoll'后，'filename'为 – undefined 2013-05-14 13:45:59

哈哈，天才评论。 – 2013-05-14 13:51:01

我会建议使用onload处理的图像，而不是一个固定的超时：

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

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

在这种情况下，你需要从函数内部得到的文件名，而不是把它当作一个PARAM。

来源

2013-05-14 14:05:53

我试过你的解决方案，我同意它应该在理论上工作，但不幸的是没有超时videoDataPoll似乎失去控制，冻结网页。 – exxodus7 2013-05-14 16:14:44

@ exxodus7你仍然可以使用超时，但你应该真的等待onload在发射超时 – 2013-05-14 16:15:38

好点。我在更新答案时一起尝试了两种方法，但它仍然具有相同的效果（如更新中所述，只有在远程主机上运行时才会出现问题）。 – exxodus7 2013-05-14 16:20:17

DOM需要很长时间才能做出反应

回答

相关问题