检测 <img> src 何时更新

Question

我测试了在 CodeProject 上找到的一个简洁的小项目：http://www.codeproject.com/Articles/371955/Motion-JPEG-Streaming-Server

基本上，当项目运行时，它会将桌面流式传输到任何连接的客户端。客户端使用他们的浏览器进行连接。这些程序流式传输桌面的 JPEG 图像。

我注意到 HTML -- 客户端 -- 中的所有内容如下：

<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=0.1">
        <style type="text/css"></style>
    </head>
    <body style="margin: 0px;">
        <img style="-webkit-user-select: none" src="http://54.194.225.174:8080/">
    </body>
</html>

我想知道的是 <img> src 何时更新。有什么方法可以测量帧更新之间的时间吗？

Answer 1

不确定这是否有效，但您可以试一试。我没有像这样的图像服务器的工作 url。

HTML

<body style="margin: 0px;">
    <img id= "imageFrame" style="-webkit-user-select: none;width:400px;" src="http://localhost/image.png" >
    <div id="intervals"></div>
</body>

Javascript / jQuery

$(function() {
    var priorLoad = new Date().getTime();
    var count = 0;

    $('#imageFrame').on('load', function () {
        var thisLoad = new Date().getTime();
        var interval = thisLoad - priorLoad;
        $('#intervals').append($('<div/>').attr("id", "image" + count).addClass("someClass").append("<span/>").text(interval));
        priorLoad = thisLoad;
        count++;
    });
});

检测 <img> src 何时更新

Detect when <img> src is updated

html

streaming

remote-desktop