javascript - 寻找图像 onLoad 的替代品

标签 javascript events onload dom-events

<分区>

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

关于javascript - 寻找图像 onLoad 的替代品,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10543803/

相关文章:

JavaScript AddToStage 等效项

javascript打开新标签,无法从新标签中获取标签和属性,但只能获取null

javascript - 外部异步/延迟 javascript 是否保证在窗口 onload 事件之前执行?

javascript - 为什么在 javascript 中跳过这个 while 循环?

javascript - 滚动功能(从链接到部分标签)不起作用

javascript - 如何从Click事件函数返回ID值?

通过ajax的Jquery asp.net按钮点击事件

javascript - 如何使 .focus() 在单选按钮数组上工作?

javascript - 在 Javascript 中四舍五入值

javascript - 冒泡可用于图像加载事件吗?