Is bubbling available for image load events?

问题

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.

回答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.

回答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

回答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.

回答4:

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

Without libraries:

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

回答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';
}

回答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')" />

来源：https://stackoverflow.com/questions/14983988/is-bubbling-available-for-image-load-events

标签

javascript

dom-events

onload

event-bubbling