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

Question

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?

Answer 1

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.

Answer 2

Jquery makes it really simple.

You can just use the .load() function to bind an event for the time when image is completely loaded.

    $("img").load(function() {
        // Yeay, it was loaded, and works in all browsers!
    });