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

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.

Yes, I was just working on an AJAX page that dynamically loaded images. I also wanted to detect if images were loaded so I could transition them in with a jQuery effect.

img = $('myImageID')
img[0].src = 'http://new.url.for.image/';
alert(img[0].complete);                    // seems to always return true
                                           // in Firefox, perhaps because
                                           // the original src had been loaded

So instead I had to do this...

img = $('myImageID')
newImg = $('<img>')                // create a completely new IMG element
          .attr('src', 'http://new.url.for.image/')
          .attr('id', img[0].id);
img.replaceWith(newImg);
img = newImg;
alert(img[0].complete);

(Note: I haven't tested this exact code, it's a simplified version of what I was trying to do, but hopefully communicates the idea.)

Simon.

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!
    });

You can use load() but beware of Internet Explorer: It won't fire the event, if the image is cached

if($img[0].readyState === 4){ // image is cached in IE
    alert("Image loaded!");
}else{
    $img.load(function(){ // for other browsers and IE, if not cached
        alert("Image loaded!");
    });
}

myimage=new Image();
myimage.src="whatever";
if(myimage.height>0 && myimage.complete){alert("my image has loaded");}

// might be overly simple but works for me in all browsers i think.

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};
});

});