Question

7

how to show image only when it is completely loaded?

rated 0 times [ 9] [ 2] / answers: 1 / hits: 26140 / 12 Years ago, thu, january 17, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

carl

Add To Favorites

Follow

Total Points: 633

Total Questions: 105

Total Answers: 105

Location: Fiji

Member since Wed, Jul 14, 2021

3 Years ago

answered 12 Years ago patienceannel · Accepted Answer

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

}