尋找替代圖像的onLoad

Question

可能重複：
jQuery or JavaScript: Determine when image finished loading

的問題是已知的，但我無法找到任何簡單的解決辦法：

var img = new Image(); 

img.onLoad = function() { 
    console.log("load");   // this event doesn't fire 
}; 

img.src = "img/domino/21.png"; 

console.log(img.complete);  // false 

setTimeout(function() { 
    console.log(img.complete); // sometimes true, sometimes false 
}, 10); 

我正在尋找一個onComplete事件的實現，但我找不到任何東西。你會幫忙嗎？

Answer 1

事件處理程序屬性的正確拼寫全部小寫.onload，不.onLoad。

var img = new Image(); 

img.onload = function() { 
    console.log("load");   // works every time 
}; 

img.src = "img/domino/21.png"; 

JavaScript是大小寫敏感的，所以你必須使用正確的情況下爲所有對象的屬性。

---

除了.onload的替代品使用方法：

img.addEventListener("load", function(e) {...}); 

或（在舊版本的IE）：

img.attachEvent("onload", function(e) {...}); 

如果你只使用一個事件處理程序，你AREN使用已經爲您抽象事件處理程序的跨平臺庫，那麼使用.onload是最簡單的。

而且，這裏有一個簡單的跨瀏覽器的方法來添加事件處理程序：

// add event cross browser 
function addEvent(elem, event, fn) { 
    if (elem.addEventListener) { 
     elem.addEventListener(event, fn, false); 
    } else { 
     elem.attachEvent("on" + event, function() { 
      // set the this pointer same as addEventListener when fn is called 
      return(fn.call(elem, window.event)); 
     }); 
    } 
} 

Answer 2

您確定您的圖片在img/domino/21.png存在嗎？以下代碼適用於Firebug的控制檯。

var img = new Image(); 

var onload = function() { 
    console.log('load'); 
} 

img.onload = onload; 

img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds(); 

Answer 3

如果你可以使用jQuery它可以是簡單的：

$('img').load(foo).error(foo); 

或者香草的javascript：

img.onload = img.onerror = foo; 

Answer 4

var img = new Image(); 
img.onload = function() { 
    console.log("load"); 
}; 
img.src = "img/domino/21.png"; 
console.log(img.complete);  // false 
setTimeout(function() { 
    console.log(img.complete); // sometimes true, sometimes false 
}, 10); 

在Chrome瀏覽器，Firefox和Safari

var img = new Image(); 
img.addEventListener('load',function() { 
    console.log("load"); 
}); 
img.src = "img/domino/21.png"; 
console.log(img.complete);  // false 
setTimeout(function() { 
    console.log(img.complete); // sometimes true, sometimes false 
}, 10); 

或在IE或Opera

var img = new Image(); 
img.attachEvent('onload',function() { 
    console.log("load"); 
}); 
img.src = "img/domino/21.png"; 
console.log(img.complete);  // false 
setTimeout(function() { 
    console.log(img.complete); // sometimes true, sometimes false 
}, 10); 

Answer 5

var img = new Image(); 

//blah blah... 

img.addEventListener("load",function() { 
    console.log("Loaded!"); 
});