Checking If An Image Loaded Successfully.

• Tweet
• 

        From: <a href="http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm">http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm</a>.

Called in an onload listener to see if an image object has managed to load properly.

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: they always return true.
    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;
}

Works fine in IE and Gecko. Not tested (as yet) in Opera or Safari.    

Tags:
• images
• javascript