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，您可以通过检查其load属性来检查其complete事件是否已被触发。

这将可靠地为相关图像调用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，然后在下一行添加处理程序，那么浏览器在这两行之间完全有效，看看它已经完成加载图像，查找{{{}的处理程序1}} event，看不到任何内容，并设置load - 我们根本不会得到回调。它真的不太可能，但它可能会发生。

出于同样的原因，对于同一图像，上述情况可能会在非常罕见的情况下调用complete 两次。因此，您希望在函数中处理它已被调用的可能性。

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

1 个答案: