What Workarounds Exist For The `complete` Property In Firefox?

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 t

Solution 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.

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

Solution 3:

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.

Solution 4:

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

Solution 5:

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.