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

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

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

Answer 4

如果你可以使用jQuery，它可以很简单：

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

或者使用vanilla javascript：

img.onload = img.onerror = foo;

Answer 5

var img = new Image();

//blah blah...

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

寻找图像onLoad的替代方案

5 个答案: