What workarounds exist for the `complete` property in FireFox?

dom, javascript, jquery

Solution

You could also try checking one of the dimensions of the `img` element in addition to `complete`:

function isImageLoaded() {
    var theImage = $('#myImage'); 

    if (!theImage.get(0).complete) {
        return false;
    }
    else if (theImage.height() === 0) {
        return false;
    }

    return true;
}

An unloaded `img` or an `img` with an invalid `src` attribute should have `.height()` and `.width()` equal to `0` in Firefox. In Chrome and Opera neither method appears to work properly. In those browsers `theImage.height()` always returned a positive value in my testing.

Problem

I am attempting to use jQuery to determine if an image has properly loaded. The following works just fine (and returns `true` or `false` as of the state of the image) but only seems to work in IE, in FireFox, it seems to always return `true` - even if the state is actually incomplete: ``` var image = $("img#myImage"); alert(image[0].complete); ``` What is the Firefox equivalent for `image.complete` in JavaScript or jQuery?

Original source