Javascript image.complete - What to use in Firefox.

Question

I am attempting to use Jquery to determine if an image has properly loaded or is broken.

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 imcomplete:

    image = $("img#myImage");
    alert(image[0].complete);

What is the Firefox equivalent for image.complete in Javascript/Jquery

Answer 1

I dont know if firefox has another prop, method that does it but, you can use this workaround:

$(document).ready(function(){

$("img").each(
//for each image declared in html
function(index)
{
 document.images[index].complete= false;
 document.images[index].onload = function(){ this.complete= true};
});

});

Answer 2

You could also try checking the 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.