how to check if image loaded or not in javascript?

If you are having a webpage with large sized images, you would notice the browser taking long time to load those images and showup. A good idea would be show a loading animation until large photos load.

There is a way to check whether the images have been loaded or not in javascript. Using the Image() object is a good method to cache large images.

You can use onload function to trigger a event after loading is complete.

objImg = new Image();
objImg.src = 'photo.gif';
objImg.onload = function() {
/// do some work;
}

Another way of checking is use complete property

objImg = new Image();
objImg.src = 'photo.gif';

if(!objImg.complete)
{
/// do other work;
}

Hope this helps if you are a javascript programmer.