javascript - 如何消除 html 中图像加载的延迟？

Question

我创建了一个网页并在此页面上放置了一个 img 标签。 img.src 是网络摄像机图像的 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 “事件处理程序”属性，用于检查图像何时加载。当调用该函数时，#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" />