DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Checking If An Image Loaded Successfully.

04.08.2005
| 33871 views |
  • submit to reddit
        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.