如何消除 html 中图像加载的延迟？答案

【问题标题】：how to remove delay in image loading in html?如何消除 html 中图像加载的延迟？
【发布时间】：2012-12-30 18:42:01
【问题描述】：

我创建了一个网页并在该页面上放置了一个 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>

【问题讨论】：

缩小图片？
获得更好的互联网连接。
@Christoph 我在网络上。这是一个不是来自互联网的网络地址。
@Bharath 我如何使用 AJAX 来做到这一点，我对所有这些网络技术都是新手。谢谢
这样做的方法是延迟图片流，在后台下载它们，将它们隐藏到 DOM 中，然后在 10 秒左右后按顺序显示。

标签： javascript html web

【解决方案1】：

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

如果#stream 不是直接在正文标签内（即在另一个元素内，如<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" />

【讨论】：

【解决方案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 的内容，而无需重新加载整个页面。

【讨论】：

用JavaScript加载额外的HTML文件如何解决图片加载时间过长的问题？
那么我参考其他的 cmets。使图像更小。如果您的互联网太慢，您将无法更改加载时间。否则就等待它加载。但如果导航进来，ajax 肯定会加快速度。
我可以同时使用两张图片来消除闪烁。当一个完成加载时，它应该在场景后面可见，而另一个继续加载。等等……

【解决方案3】：

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

【讨论】：

将图像保存为 GIF可能会使图像变小 - 但如果它们是照片，它会使它们看起来可怕。
您无法真正将动态图像放入 Photoshop 或任何图像编辑程序中。它在不断变化，等到它重新调整大小时，已经有一个新的可用了。

【解决方案4】：

也许可以在比网页刷新速度更快的外部脚本中处理图像加载，然后嵌入它？像“videoloader.js”这样它可以单独加载，而不必等待html页面加载。

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

您还可以使用 javascript 将动态显示的图像转换为质量较低的 jpg

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

【讨论】：

问题不是页面加载慢，而是动态图片加载慢。