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

Question

我的网页上有一个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);
}

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

Answer 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());
}