跨浏览器检查是否已加载图像

Question

I need a cross browser solution to find if an image is done loading.

I know about this:

var theImage = new Image()
theImage.src = 'http://pieisgood.org/images/slice.jpg' //yum, pie :)
//later...
if (theImage.complete) {
    //do stuff
}

Is that cross browser compatible (by that I mean FF, Chrome, Safari, Opera, IE8+)? If not, how can I do this in a cross browser and jQuery-less way?

Answer 1

Something as:

var theImage = new Image()
theImage.src = 'http://pieisgood.org/images/slice.jpg' //yum, pie :)
theImage.isLoaded = false;
//later...
theImage.onload = function(){
    theImage.isLoaded = true;
    //do stuff
}
if(theImage.isLoaded){
    alert("Loaded");
}
document.body.appendChild(theImage); // VERY needed

Should work.

Just as it set attributes as the image is really loaded. :)

Answer 2

I think you can use the 'onload' event.

image.onload = function() {
};

This should be bound though, before you set the 'src' of the image.

Answer 3

或者只是通过html控制它，并在指定的img onload事件上调用您的函数

<img src="whatever.png" onload="dostuff()" />