Is bubbling available for image load events?
The load
/onload
event does not bubble (reference, reference), so what you're asking for is not possible. You'll have to attach an event handler to each image node, or intercept the event during the capture phase, as suggested in other answers.
Array.prototype.forEach.call(document.querySelectorAll('img'), function (elem) {
elem.addEventListener('load', function () {
this.style.display = 'inline';
});
if (elem.complete) {
elem.style.display = 'inline';
}
});
The "load" event will not trigger if the image is incidentally loaded already; thus, we check whether complete
is already set.
Use capturing event listener on some DOM node other than window
(body
or other parent of image elements of interest):
document.body.addEventListener(
'load',
function(event){
var tgt = event.target;
if( tgt.tagName == 'IMG'){
tgt.style.display = 'inline';
}
},
true // <-- useCapture
)
With this you don't have to (re)attach event handlers while iterating through document.images
.
And this will work for dynamically inserted images as well.
Same is true for image's error
loading events. MDN: addEventListener