Question

我创建了一个网页，并在此页面上添加了一个img标签。 img.src是来自网络IP摄像机的图像的url。它有效，但我得到的流有延迟。我理解这种延迟是因为我加载图像并加载图像需要一些时间。我的问题是如何缩小这些延迟。我做了以下事情;

<script language="Javascript">
    x = document.getElementById("stream");
    intervalID = setInterval(LoadImage, 0);

    function LoadImage()
    {
      x = document.getElementById("stream");
      x.src = "http://IP:PORT/jpg/image.jpg";
    }
</script>    

<img id="stream"     
    width="640" height="480" 
    alt="Press reload if no video displays" 
    border="0" style="cursor:crosshair; border:medium; border:thick" />

<button type="button" id="btnStartLive" onclick="onStartLiveBtnClick()">Start Live</button>

Answer 1

我刚刚在未答复的部分找到了您的问题并决定试一试。以下脚本创建内部<img>标记（带new Image()），分配必要的属性，然后设置onload＆＃34;事件处理程序＆＃34;属性，用于检查何时加载图像。调用该函数时，#stream将替换为新的内部图像标记。

如果#stream不在body标签内（即在<div>之类的其他元素内），请编辑streamParentElement以指向图片的父元素。

我在字符串中添加了?nocache查询参数，因为在我测试代码时，我发现图像标记正在改变，但可见图像保持不变。我还添加了一个loadDelay，因为我客户端上的图像加载速度太快，而且它已经崩溃了我的浏览器。我建议你不要将该值降低到50以下。Live demonstration of this code here

<script language="Javascript">
    var streamParentElement = document.body, loadDelay = 200;
    setTimeout(MakeImage,1);    

    function MakeImage(){
        var img = new Image();
        img.src = "http://IP:PORT/jpg/image.jpg?nocahce="+new Date().getTime()+Math.random();
        img.width = 640;
        img.height = 480;
        img.style.border = 0;
        img.style.cursor = 'crosshair';
        img.id = 'stream';
        img.onload = function(){
            var stream = document.getElementById("stream");
            streamParentElement.insertBefore(img,stream);
            stream.outerHTML = '';
            setTimeout(MakeImage, loadDelay);
        };
    }
</script>    

<img id="stream" alt="Press reload if no video displays" />

Answer 2

创建你的html页面。例如：

<html>
<head>
    <title>
        Some Page
    </title>
    </link rel="stylesheet" href="path to your css file"/>
    <script type="text/javascript" src="path to you javasctipt file"></script>
</head>
<body>
    <h1 onClick="javascript:someFunction()">
        Click here
    </h1>
</body>
</html>

然后您可以创建许多其他“someFunction”函数。他们都只是引用了AJAX函数。这只是为了让键入更少......

最简单的ajax方式：

var path;
var div;
var xmlhttp = new XMLHttpRequest();

function someFunction()
    {
        path = "path to another html file";
        div = "the name of the div tag's content you want to change eg. content";
        AJAX(path, div);
    }

function AJAX(path, div)
    {
        xmlhttp.open("GET", path, false);
        xmlhttp.send();
        if (xmlhttp.readyState == 4)
        {
            document.getElementById(div).innerHTML = xmlhttp.responseText;
        }
    }

现在只需将图片包含在html文件中。 ajax允许您只更改您提供的div的内容，而无需重新加载整个页面。

Answer 3

我会尝试将您的图像放入photoshop并使分辨率达到72或更低。此外，如果您将图像保存为GIF，它们应该更小。

Answer 4

可能在外部脚本中处理图像加载，运行速度比网页刷新速度快，然后嵌入它？像一个＆＃34; videoloader.js＆＃34;这样它就可以单独加载而不必等待html页面加载。

<script src="videoloader.js"></script>

您还可以使用javascript

将动态显示的图像转换为质量较差的jpgs

看看这是否有帮助： Load lower quality image if higher one inst available

如何在html中删除图像加载的延迟？

4 个答案: