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

Question

我正在尝试使用 native 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 服务器。在 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 两次。所以你想要处理它已经在函数中被调用的可能性。