Over a million developers have joined DZone.

Checking If An Image Loaded Successfully.

DZone's Guide to

Checking If An Image Loaded Successfully.

· ·
Free Resource
From: http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm.

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.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}