如何仅在完全加载时显示图像？答案

【问题标题】：how to show image only when it is completely loaded?如何仅在完全加载时显示图像？
【发布时间】：2012-12-31 16:09:51
【问题描述】：

我的网页上有一个 img 标签。我给它一个 IP 摄像机的 url，它从那里获取图像并显示它们。我想在完全加载时显示图像。这样我就可以避免闪烁。我执行以下操作。

<img id="stream"
  width="1280" height="720" 
  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>

javascript 代码

function LoadImage()
{
  x = document.getElementById("stream");    
  x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
}

function onStartLiveBtnClick()
{       
  intervalID = setInterval(LoadImage, 0);
}

在这段代码中。当图像很大时。加载需要一些时间。同时它开始显示加载的图像部分。我想显示完整图像并跳过加载部分谢谢

【问题讨论】：

不要设置加载图像的时间间隔，然后将日期添加到图像的 url。它将一次又一次地加载图像，并且......也不要将间隔设置为零，而是将其设置为至少 100ms 以使其运行更流畅。

标签： javascript html

【解决方案1】：

预加载图片并在图片加载完成后替换<img />的来源。

function LoadImage() {
    var img = new Image(),
        x = document.getElementById("stream");

    img.onload = function() {
        x.src = img.src;
    };

    img.src = "http://IP:PORT/jpg/image.jpg" + "?_=" + (+new Date());
}

【讨论】：

【解决方案2】：

您可以使用complete 属性来检查图像是否已完成加载。但是，我认为您的代码还有其他问题，主要是您重复加载相同的图像。相反，您应该只加载一次，然后每隔一段时间检查complete 属性。

这样的事情应该可以工作：

function LoadImage()
{
  x = document.getElementById("stream");    
  x.src = "http://IP:PORT/jpg/image.jpg" + "?" + escape(new Date());
  x.style.visibility = 'hidden';
}

function CheckIsLoaded() {
  x = document.getElementById("stream");    
  if (x.complete) x.style.visibility = 'visible';
}

function onStartLiveBtnClick()
{       
  LoadImage();
  intervalID = setInterval(CheckIsLoaded, 0);
}

【讨论】：