寻找图像onLoad的替代品[重复]答案

【问题标题】：Looking for an alternative to the image onLoad [duplicate]寻找图像onLoad的替代品[重复]
【发布时间】：2012-05-11 08:44:03
【问题描述】：

可能重复：
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 事件的实现，但我找不到任何东西。你会帮忙吗？

【问题讨论】：

试试this question
onload，不是onLoad； JavaScript 是区分大小写的，即使 HTML 不是。
@Riateche - 我的图像不在 DOM 中，它是 Image 对象。
@Phrogz - 该死的：D:D:D。我因为一封信耽误了一个小时。

标签： javascript events onload dom-events

【解决方案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) {...});

如果您只使用一个事件处理程序并且没有使用已经为您抽象出事件处理程序的跨平台库，那么使用.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));   
        });
    }
}

【讨论】：

注意：问题是Looking for an alternative to the image onLoad，而不是why onLoad is not working。
是的，但我一直在寻找替代方案，因为它不起作用。当然感谢所有答案，但这解决了我的问题:)。
@ciembor - 好的，我添加了几个替代方案。
今天也发现webkit需要img.src = ''才能分配新的src，如果之前用过的话。
您的加载可能不会关闭，因为图像在浏览器缓存中。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您确定您在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();

【讨论】：

【解决方案4】：

如果你会使用 jQuery，那就很简单了：

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

或者使用原版 javascript：

img.onload = img.onerror = foo;

【讨论】：

为什么投反对票？我错过了什么吗？
当你提到 jQuery 时，你激怒了原型/mootools 粉丝
我猜是 onLoad 与 onload（但我没有这样做）。
@Derek。然后不要使用它。是我写的唯一方法吗？
我没有不同意你的回答。我不是投反对票的人。

【解决方案5】：

var img = new Image();

//blah blah...

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

【讨论】：