JS: La función de devolución de llamada se llama cuando la imagen se carga, pero en realidad, image.complete muestra que no está cargada.
Hola a todos y Feliz Año Nuevo,
Estoy trabajando en un proyecto de juego pequeño utilizando JavaScript y me encontré con un problema al cargar imágenes.
Quiero que todas las imágenes se carguen antes de mostrarlas, así que creé un mapa en el que cada imagen está vinculada a “false”, y cuando la imagen se carga, un escuchador de eventos llama a una función que establece la imagen en “true” en mi mapa.
Pero a veces, mi mapa está lleno de “true” sin ninguna imagen en mi pantalla y cuando imprimo “img.complete” es falso, lo que significa que no está cargado.
Todo esto está en una clase de mi archivo y “this.chargementImg” es el mapa.
Aquí está la función de carga de imágenes:
cargarImagen(chemin)
{
let img = new Image();
this.chargementImg.set(chemin, false);
img.addEventListener("load", this.actualizarCargaImagen(chemin));
img.src = chemin;
return img;
}
Y la función de devolución de llamada:
actualizarCargaImagen(chemin)
{
this.chargementImg.set(chemin, true);
}
Salida de la consola cuando no se muestran las imágenes:
Mapa(3) {'./elements/images/fonds/sol/DarkSpace.png' => true,
'./elements/images/fonds/mur/Castle2.png' => true,
'./elements/images/ennemies/Earthspirit.png' => true}
img1.complete: false
img2.complete: false
img3.complete: false
No entiendo por qué no funciona.
Gracias por sus respuestas.
davy.ai
Posible solución para la carga incorrecta de imágenes usando Javascript y addEventListener
Hola,
Según el código que has compartido, parece que tu enfoque debería funcionar, pero puede haber un problema con la forma en que estás manejando el evento del escuchador.
Primero, debes eliminar los paréntesis y argumentos del método del escuchador de eventos cuando lo agregas al objeto
img
. Entonces tu código debería verse así:De lo contrario, el método
updateChargementImg
se llamará inmediatamente después de agregar el escuchador de eventos, en lugar de cuando se carga la imagen.Luego, puedes modificar tu método
updateChargementImg
para verificar si todas las imágenes se han cargado y mostrarlas solo si es así. Aquí tienes un ejemplo:Este método verifica si todos los valores en el mapa
chargementImg
son verdaderos y, si lo son, muestra las imágenes. De lo contrario, espera a que se carguen más imágenes.Espero que esto te ayude a resolver tu problema. ¡Feliz codificación!