pasar - lista de eventos javascript

¿Hay burbujas disponibles para los eventos de carga de imágenes?

Question

Puedo usar:

window.addEventListner();

de alguna manera.

Todas mis imágenes tienen una display = ''none'' .

Una vez que la imagen se haya cargado,

Quiero configurar display = ''inline''

De esta manera puedo normalizar lo que se muestra mientras se descarga la imagen.

En este caso, no puedo precargar mis imágenes.

Answer 1

Puede utilizar el controlador de eventos Image.onload pero no hay burbujas involucradas.

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

Answer 2

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

Sin bibliotecas:

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

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

El evento "carga" no se disparará si la imagen ya se ha cargado de forma incidental; por lo tanto, verificamos si complete ya está configurado.

Answer 4

El evento load / load no burbujea ( referencia , referencia ), entonces lo que está pidiendo no es posible. Tendrá que adjuntar un controlador de eventos a cada nodo de imagen.

Answer 5

Utilice el detector de eventos de captura en un nodo DOM que no sea window ( body u otro elemento primario de elementos de imagen de interés):

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

Con esto no tiene que (re) adjuntar manejadores de eventos mientras itera a través de document.images .

Y esto también funcionará para imágenes insertadas dinámicamente.

Lo mismo es cierto para los eventos de carga de error la imagen. MDN: addEventListener