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