如何仅在完全加载时显示图像？ [英] how to show image only when it is completely loaded?

问题描述

我的网页上有一个img标签。我给它一个网络摄像机的URL，从中获取图像并显示它们。我想在完全加载时显示图像。这样我可以避免闪烁。

I have an img tag on my web page. I give it the url for an IP camera from where it get images and display them. I want to show image when it is completely loaded. so that I can avoid flickering. I do the following.

<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代码

javascript code

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

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

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

in this code. when image is large. it takes some time to load. in the mean time it start showing the part of image loaded. I want to display full image and skip the loading part Thanks

推荐答案

预加载图像并替换<$ c $

Preload the image and replace the source of the <img /> after the image has finished loading.

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

这篇关于如何仅在完全加载时显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！