javascript：onload 和 onerror 一起调用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12512539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: onload and onerror called together
提问by wceo
I'm new to JavaScript and therefore confused for the variable scope... I'm trying to load an image, and replace it with another URL when it doesn't exist. I have to do it in pure JavaScript.
我是 JavaScript 的新手，因此对变量范围感到困惑......我试图加载一个图像，并在它不存在时用另一个 URL 替换它。我必须用纯 JavaScript 来做。
Here I got 2 versions extremely alike, but they perform differently. The only thing in common is: they don't work. The 3rd version requires a refresh and doesn't work under IE. d is the object with number attribute, which has no problem.
在这里，我得到了两个非常相似的版本，但它们的表现不同。唯一的共同点是：它们不起作用。第 3 个版本需要刷新并且在 IE 下不起作用。d是number属性的对象，没有问题。
Here is what they have in common
这是他们的共同点
.attr("xlink:href", function (d) {
var img = new Image();
Here the Version 1: Both onloadand onerrorare called. However d receives the src, unfortunately it's always the generic.jpg.
这里是第 1 版：onload和onerror都被调用。然而 d 接收 src，不幸的是它总是 generic.jpg。
function onLoadHandler() {
d.src = "http://.../peopleimages/" + d.num + ".jpg";
alert(d.name + " onload called");
}
function onErrorHandler() {
d.src = "http://.../images/generic.jpg";
alert(d.name + " onerror called");
}
img.onload = onLoadHandler();
img.onerror = onErrorHandler();
img.src = "http://.../peopleimages/" + d.num + ".jpg";
return d.src;
}
Here the Version 2: Depending on the existance of the image, either onload or onerror is called. But the value of d.src is undefined when alert.
这里的版本 2：根据图像的存在，调用 onload 或 onerror。但是alert时d.src的值是undefined。
img.onload = function () {
alert(d.name + " : loaded");
d.src = "http://.../peopleimages/" + d.num + ".jpg";
}
img.onerror = function () {
alert(d.name + " : failed");
d.src = "http://.../images/generic.jpg";
}
img.src = "http://.../peopleimages/" + d.num + ".jpg";
alert(d.src);//undefined
return d.src;
}
Here the Version 3: it works but not the first time. I have to do refresh to get the images correctly. Perhaps it returns before the image is loaded completely.
这是第 3 版：它有效，但不是第一次。我必须刷新才能正确获取图像。也许它在图像完全加载之前返回。
img.src = "http://.../peopleimages/" + d.num + ".jpg";
return img.complete ? "http://.../peopleimages/" + d.num + ".jpg" : "http://.../images/generic.jpg";
}
回答by epascarello
You are calling the functions, not assigning!
您正在调用函数，而不是分配！
img.onload = onLoadHandler();
img.onerror = onErrorHandler();
needs to be
需要是
img.onload = onLoadHandler;
img.onerror = onErrorHandler;
回答by Chris McCowan
The problem with your second example is that the image callbacks are fired when the image loads, after your other code has been evaluated. I'm really not sure what your code accomplishes, but try something like this.
您的第二个示例的问题在于，在评估其他代码后，在加载图像时会触发图像回调。我真的不确定你的代码完成了什么，但尝试这样的事情。
img.onload = function () {
alert(d.name + " : loaded");
d.src = "http://.../peopleimages/" + d.num + ".jpg";
return doSomething(this, d);
}
img.onerror = function () {
alert(d.name + " : failed");
d.src = "http://.../images/generic.jpg";
return doSomething(this, d);
}
function doSomething(img, d) {
img.src = "http://.../peopleimages/" + d.num + ".jpg";
alert(d.src);
return d.src;
};
