为什么图像上的加载事件不起作用？

Question

我正在尝试使用本机 javascript 在我的图像上添加 load 事件。这是代码：

var imgs = $("figure img"); // querySelectorAll

for(var i = 0, l = imgs.length ; i < l ; ++i)
  imgs[i].addEventListener("load", img_loaded, false);

但我的函数img_loaded 从未被调用过。 imgs.length 是 3，我确定事件已附加。

有什么想法吗？我的窗口也有同样的问题，window.addEventListener("load", window_loaded, false) 有时可以。

我正在使用requirejs，它是nodejs server。在 Chrome 和 Firefox 上进行测试。

---

（注意：$ 与 jQuery 无关，它只是 document.querySelectorAll 的别名。）

Answer 1

最可能的原因是load 事件已经触发。对于img，您可以通过检查其complete 属性来检查其load 事件是否已被触发。

这将可靠地为相关图像调用img_loaded，例如：

var imgs = $("figure img");
var img;

for(var i = 0, l = imgs.length ; i < l ; ++i) {
  img = imgs[i];
  img.addEventListener("load", img_loaded, false);
  if (img.complete) {
    img_loaded.call(img);
    img.removeEventListener("load", img_loaded, false);
  }
}

您可能想知道为什么在上面我首先附加事件处理程序，然后检查是否检查了img.complete，如果是，我删除事件处理程序并调用它。那是为了防止漏接电话。只有一个主 JavaScript 线程，但 浏览器 不是单线程的。如果我们首先检查complete，然后在下一行添加处理程序，那么在这两行之间，浏览器将完全有效，以查看它已完成加载图像，查找load 事件的处理程序，看不到任何东西，然后设置complete——我们根本不会收到回调。这真的不太可能，但它有可能发生。

出于同样的原因，上面可能会在极少数情况下为同一图像调用img_loaded两次。所以你想在函数中处理它已经被调用的可能性。