Is bubbling available for image load events?

Question

Can I use:

window.addEventListner();

in some way.

All my images have a display = 'none'.

Once the image has loaded,

I want to set display = 'inline'

This way I can normalize what is displayed while the image is being downloaded.

In this case, I can not pre-load my images.

Answer 1

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.

Answer 2

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

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';
    }
});

The "load" event will not trigger if the image is incidentally loaded already; thus, we check whether complete is already set.

Answer 4

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

---

Without libraries:

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

Answer 5

You can use the Image.onload event handler but there's no bubbling involved.

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

Answer 6

Since the load event does not bubble, you can lauch your own bubbling event. An example with jQuery:

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