跨瀏覽器檢查是否已加載圖像

Question

我需要一個跨瀏覽器解決方案來查找圖像是否已完成加載。

我知道這件事：

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

這是跨瀏覽器兼容（我的意思是FF，Chrome，Safari，Opera，IE8 +）？ 如果沒有，我怎么能在跨瀏覽器和jQuery的方式做到這一點？

Answer 1

有點像：

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

應該管用。

正如它設置屬性一樣，圖像確實已加載。 :)

Answer 2

我想你可以使用'onload'事件。

image.onload = function() {
};

但是，在設置圖像的“ src”之前，應對此進行綁定。

Answer 3

或者只是通過html控制它，並在指定的img onload事件上調用您的函數

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