Images Loaded or Not? Check With JavaScript

Billy Heaton 1 min read

Javascript function to test if image is loaded already :

// Check if images load properly
// returns false if image not loaded
function imgOK(img) {
    if (!img.complete) {
        return false;
    }
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }
    return true;
}

// Note: using prototype js library for $, $$
// Test if images load ok
var tnLink = $$('.more-views a');
// Hide links to more views when images do no load properly.
if (tnLink.length>0) {
    document.observe("dom:loaded", function() {
        tnLink.each(function(s, index) {
            var tnImg = tnLink[index].firstDescendant();
            var obj = $(s).firstDescendant();
            console.log(tnImg.src + " > is ok : " + imgOK(obj));
            if ( imgOK(obj) == false) {
                console.log('bad image!');
                $(s).addClassName('no-display');
            }
        });
    });
}

Define a CSS class to hide the link with a bad image :

CSS - no-display.css

.no-display {
    display: none;
}

There, no unexpected broken images in view.

About the Author

Billy Heaton
Billy Heaton

Software engineer with two decades of experience who favors Ruby and JavaScript to build web applications