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

Question

我可以用吗：

window.addEventListner();

某种程度上来说。

我的所有图像都有display = 'none'。

图像加载后，

我想设置display = 'inline'

这样我可以规范化下载图像时显示的内容。

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

Answer 1

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

Answer 2

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

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

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

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

---

没有图书馆：

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

Answer 6

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

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