Possible Duplicate:
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 事件的实现,但找不到任何东西。你愿意帮忙吗?
事件处理程序属性的正确拼写是全部小写 .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) {...});
如果您只使用一个事件处理程序并且您没有使用已经为您抽象事件处理程序的跨平台库,那么使用 .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));
});
}
}