Javascript: Check an image is Loaded or Not

image loaded

How can we check whether an image is loaded fully or
partially using javascript. It is possible
See the Example Below.

function IsImageOk(img) {
// During the onload event, IE correctly identifies
any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.

if (!img.complete) {
return false;
}

// However, they do have two very useful properties:
naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.

if (typeof img.naturalWidth
!= “undefined” && img.naturalWidth
== 0) {
return false;
}

// No other way of checking: assume it’s ok.
return true;
}

//Call this function onLoad of body tag
function
checkImages() {
for (var i = 0; i < document.images.length; i++) {
if (!IsImageOk(document.images[i])) {

document.images[i].src = “/images/loaderror.jpg“;
}
}
}

8 thoughts on “Javascript: Check an image is Loaded or Not

  1. rolfen

    It didn’t work for me, in IE8, it did not seem to detect an image which was preloaded as a background through inline CSS.
    I had an image loading queue to load a big number of images. One (only one!) of these images was already used as a CSS background. In IE8, when the queue got to this image, it requested it, then waited for the image to be loaded (ie the load even to fire) before proceeding to the next image in the queue. But that load event never came, so the queue always froze at that point. I tried to use your code to detect whether the image is already loaded, but it didn’t do it. I finally manually removed the problematic image from the loading queue and the rest works normally now.

Leave a Reply