javascript - 冒泡可用于图像加载事件吗？

Question

我可以用吗：

window.addEventListner();

某种程度上来说。

我所有的图像都有一个display = 'none'.

图像加载后，

我想设置display = 'inline'

通过这种方式，我可以标准化下载图像时显示的内容。

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

Answer 1

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

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

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

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

图像的error加载事件也是如此。MDN：添加事件监听器

Answer 2

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

Answer 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已经设置。

Answer 4

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

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

Answer 5

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

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

Answer 6

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

---

没有库：

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