how to check if image loaded or not in javascript?

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.