how to check whether the image is loaded properly?

Check whether the image is loaded completely:

If we have a huge list of images in our site then it will problem of displaying all those images as it loads for a moment. To load the image quickly we use image() in javascript as,

var pic = new Image();

pic.src="car.jpg";

This Image() loads all the images as soon as possible. There may be a case to check whether the image is loaded or not. For that case we use "complete" property in javascript.

pic.complete

Complete property always returns boolean value.

For eg,

<script language=javascript>

function img_popup(){

       var pic= new Image();

       pic.src="car.jpg";

       if(pic.complete){

          clearTimeout(img_timer);

          var ff = "<img src=car.jpg width=250 height=150>";

          var hmenu = document.getElementById('PopUp');

          hmenu.innerHTML = ff;

          hmenu.style.display = 'block';

       }else{

          var ff = "<img src=load.gif>";

          var hmenu = document.getElementById('PopUp');

	  hmenu.innerHTML = ff;

	  hmenu.style.display = 'block';

	  var img_timer = setTimeout('img_popup()', 500)

      }

}

</script>

<input type=button onClick="img_popup()">

<div id='PopUp' style='display: none;'></div>

In the above example, loading image will be displayed if the "car.jpg" is not loaded completely else the "car.jpg" image will be displayed.
This property will be helpful if you have more images.