冒泡可用于图像加载事件吗？答案

【问题标题】：Is bubbling available for image load events?冒泡可用于图像加载事件吗？
【发布时间】：2013-02-05 16:45:47
【问题描述】：

我可以使用吗：

window.addEventListner();

以某种方式。

我所有的图片都有一个display = 'none'。

图片加载完毕后，

我要设置display = 'inline'

这样我可以在下载图像时标准化显示的内容。

在这种情况下，我无法预加载我的图像。

【问题讨论】：

标签： javascript dom-events onload event-bubbling

【解决方案1】：

在 window（body 或其他感兴趣的图像元素的父级）以外的某个 DOM 节点上使用 capturing 事件侦听器：

document.body.addEventListener(
    'load',
    function(event){
        var tgt = event.target;
        if( tgt.tagName == 'IMG'){
            tgt.style.display = 'inline';
        }
    },
    true // <-- useCapture
)

有了这个，您不必在遍历document.images 时（重新）附加事件处理程序。

这也适用于动态插入的图像。

Same is true for image's error loading events.MDN：addEventListener

【讨论】：

我从没想过要为图像加载事件的事件委托尝试这个。相当精彩！以及它不能是窗口的原因：“由于遗留原因，文档内资源（例如图像）的加载事件不包括在 HTML 实现中的传播路径中的窗口”

【解决方案2】：

load/onload 事件不会冒泡（reference，reference），~~所以你所要求的是不可能的~~。您必须将事件处理程序附加到每个图像节点，或在捕获阶段拦截事件，如其他答案中所建议的那样。

【讨论】：

甚至不是“异常”。另一个参考：w3.org/TR/DOM-Level-3-Events/#event-type-load
我原以为这就是事件冒泡的用途。但我猜不是，我已经更新了我的问题。
许多其他事件冒泡，例如click，这肯定很有用。但load 不会冒泡这一事实并不意味着您无法预加载图像。为什么不创建一个函数来处理所有图像的load？
类似的东西（虽然他的纯js例子行不通，但你不能像imgs.onload那样做，你必须循环）

【解决方案3】：

Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) {
    elem.addEventListener('load', function () {
        this.style.display = 'inline';
    });
    if (elem.complete) {
        elem.style.display = 'inline';
    }
});

如果图像已经偶然加载，则不会触发“加载”事件；因此，我们检查complete 是否已经设置。

【讨论】：

【解决方案4】：

您可以使用Image.onload 事件处理程序，但不涉及冒泡。

var i = new Image;
i.onload = function() {
  this.style.display = 'block';
}

【讨论】：

【解决方案5】：

由于加载事件不会冒泡，您可以启动自己的冒泡事件。一个 jQuery 的例子：

<img src="dog.jpg" onload="$(this).trigger('image-loaded')" />

【讨论】：

【解决方案6】：

$('img').on('load', function() {
    $(this).show()
})

没有库：

window.onload = function() {
   var imgs = document.querySelectorAll('img')
   imgs.onload = function() {
      this.style.display = 'inline';
   }
}

【讨论】：

不是window.onload在所有图片都加载完毕之后调用吗？
@FelixKling 不一定。
真的可以将 onload 应用到这样的 NodeList 上吗？
@bfavaretto 它不是。 第二个例子是错误的。
第二个例子根本不应该工作。 onload 仅适用于具有该属性的特定对象 -- querySelectorAll 返回一个节点列表，因此您将尝试将 onload 应用于永远不会发生的节点列表。