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

Question

我可以使用:

window.addEventListner();

以某种方式。

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

图像加载后，

我想设置display = 'inline'

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

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

Answer 1

在某些父 DOM 元素(例如 document、document.body 或其他一些元素)上使用捕获事件监听器您需要观察的图像的包装器。您可以在元素 addEventListener 的第三个参数中执行此操作方法:

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

第三个参数可以是 bool 值 (true) 或新添加的具有 capture bool 属性的“选项”对象 ({ capture: true }).

使用这种方法，您不必在迭代 document.images 实时 HTMLCollection 或某些(重新)查询的静态 NodeList 时(重新)附加事件处理程序。

这通常称为“事件委托(delegate)模式”。

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

同样适用于image's error loading events.

addEventListener at MDN