JavaScript：同时调用onload和onerror

Question

我刚接触JavaScript，因此对变量作用域感到困惑... 我正在尝试加载一个图像，并在它不存在时替换为另一个URL。 我必须使用纯JavaScript来完成。

这里我有2个极其相似的版本，但它们执行方式不同。唯一相同的是：它们都不起作用。第三个版本需要刷新并且在IE下无法工作。d是带有数字属性的对象，它没有问题。

以下是它们共同的部分：

.attr("xlink:href", function (d) {
  var img = new Image();

这是第一版: 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;
  }

这里是第二个版本：根据图片是否存在，将调用onload或onerror。但是当警告时，d.src的值未定义。

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

这里是第三个版本：它可以工作，但第一次使用时无效。我必须刷新页面才能正确获取图像。可能是因为在图像完全加载之前返回了。

  img.src = "http://.../peopleimages/" + d.num + ".jpg";
  return img.complete ? "http://.../peopleimages/" + d.num + ".jpg" : "http://.../images/generic.jpg";
  }

- wceo

Answer 1

你正在调用函数，而不是赋值！

img.onload = onLoadHandler();
img.onerror = onErrorHandler();

需要被。

img.onload = onLoadHandler;
img.onerror = onErrorHandler;

- epascarello

---

非常感谢！我太粗心了。现在有在函数内更改d.src的问题。 - wceo

为什么不直接在内部使用 this？ - epascarello

抱歉，我不太确定。应该是这个[d.src]吗？它不起作用。 - wceo

我也尝试过将var src添加到处理程序之外，但它不起作用:( - wceo

Answer 2

您第二个示例的问题在于图像回调是在图像加载后触发的，而您的其他代码已经被评估。我真的不确定您的代码实现了什么，但请尝试类似于以下内容的东西。

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

- Chris McCowan