9

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

YakovL
  • 6,451
  • 11
  • 52
  • 82
Sarfraz Ahmed
  • 1,293
  • 6
  • 22
  • 42
  • Do NOT set an interval for loading the image and then add a date to the url of the image. It will load the image again and again and again and again and... Also do not set the interval to zero, but set it to at least 100ms to make it run more smooth. – Jacco Jan 17 '13 at 07:06

2 Answers2

24

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());
}
Andreas
  • 20,797
  • 7
  • 44
  • 55
1

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);
}
laurent
  • 83,816
  • 72
  • 267
  • 404