Programming Ideas, Logics, Tips and Tricks

Javascript: Check an image is Loaded or Not

Posted on 27. Jul, 2007 by Sajith M.R in html, webworld

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“;
}
}
}