How To Show Image Only When It Is Completely Loaded?

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 avo

Solution 1:

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

Solution 2:

You can use the complete property to check if the image has finished loading. However, I think there are other issues with your code, mainly you are repeatedly loading the same image. Instead, you should load it only once and then check the complete property in an interval.

Something like this should work:

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